如何在HTML，JS中单击鼠标来改变矩形部分的颜色？

Question

任务：将鼠标光标移动到矩形的任何部分时，通过单击更改或删除给定部分的颜色。

.square {
  width: 300px;
  height: 150px;
  background: #9acd32;
  margin: 30px;
}

<div class="square"></div>

我了解如何通过在js中单击鼠标来更改整个背景，但我不知道如何在此图的某个部分执行此操作。可以改变方形，高度和宽度的可变颜色区域。

如何使用HTML，JS实现？这需要什么方法？或者只能用Canvasa'e绘制的图形及其功能来解决这个任务？

Answer 1

通过插入jQuery，矩形在悬停时更改其颜色，单击它将其删除。这是怎么做的：

$( "#squareID" ).click(function() {
  $( ".square" ).remove();
});
$( "#squareID" ).mouseover(function() {
  $(this).css("background", "#456545");
});
$( "#squareID" ).mouseout(function() {
  $(this).css("background", "#9ACD32");
});

.square {
  width: 300px;
  height: 150px;
  background: #9acd32;
  margin: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="squareID" class="square"></div>

除非你再次提出问题，否则无法执行你的要求。

Answer 2

你不能改变<div class="square"></div>的任何部分，因为它是完整的。

但是你可以添加其他divs并通过点击你可以将他们隐藏的风格改为可见。

你也可以检查http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Answer 3

如果你使用SVG，你应该能够用简单的css做到这一点，几乎你可以在SVG中定位任何东西，here an example。根据示例，您可以使用{SVG元素选择器}：使用鼠标悬停来改变css属性，或者遵循相同的概念，您可以使用document.querySelector（{SVG元素选择器}）来添加事件Listener（'click'，...） 。

我认为只要使用简单的HTML就可以轻松完成