javascript - 如何在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>

除非您再次阐明问题，否则无法进一步执行您的请求。