Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 1

通过插入jQuery，矩形会在悬停时更改其颜色，单击它会将其删除。以下是如何做到这一点：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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元素选择器}）来添加事件管理器（＆＃39;单击＆＃39; ，...）。

我认为只要使用简单的HTML

就可以轻松完成

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

3 个答案: