Question

编辑：我遇到的唯一问题是缺少jQuery

我的code应该在每次鼠标悬停时生成一种新颜色，但它不能正常工作你能告诉我哪里有问题吗？

＆＃13;

var number;
var newColor;
setInterval(function() {
  number = Math.floor((Math.random() * 1000000) + 1);
  newColor = "#" + number;
}, 1000);
$("#myBtn").mouseover(function() {
  $("#myDiv").css("background-color", newColor);
});

＆＃13;

div {
  background: red;
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="myBtn">Hover Here To Change Color</button>
<div id="myDiv"></div>

＆＃13;

Answer 1

当鼠标悬停在按钮上时，此代码会每秒更改颜色 - 如果这不是您的意图，那么您唯一的问题就是缺少jQuery

＆＃13;

var isOver = false; // only required if colour should change continuously
var newColor;
setInterval(function() {
  var number = Math.floor((Math.random() * 1000000) + 1);
  newColor = "#" + number;
  // next 3 lines only required if colour should change continuously
  if(isOver) {
    $("#myDiv").css("background-color", newColor);
  }
}, 1000);
$("#myBtn").mouseover(function() {
  isOver = true; // only required if colour should change continuously
  $("#myDiv").css("background-color", newColor);
});
// next 3 lines only required if colour should change continuously
$("#myBtn").mouseout(function() {
  isOver = false;
});

＆＃13;

div {
  background: red;
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn">Hover Here To Change Color</button>
<div id="myDiv"></div>

＆＃13;

Answer 2

这个会改变每个mouseover的颜色。

我拿出了setInterval，因为我无法理解你为什么需要这个......？

＆＃13;

$("#myBtn").mouseover(function() {
  $("#myDiv").css("background-color", "#" + Math.floor((Math.random() * 1000000) + 1));
});

＆＃13;

div {
  background: red;
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="myBtn">Hover Here To Change Color</button>
<div id="myDiv"></div>

＆＃13;

Answer 3

尝试使用以下代码替换您的代码

var number;
var newColor;

$("#myBtn").mouseover(function() {
  number = Math.floor((Math.random() * 1000000) + 1);
  newColor = "#" + number;
  $("#myDiv").css("background-color", newColor);
});

div {
  background: red;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="myBtn">Hover Here To Change Color</button>
<div id="myDiv"></div>

Answer 4

在codepen上它对我有用，如果你想在鼠标上面获得一种新颜色而不是鼠标移动，你应该将mouseout设置为相同的颜色。

Answer 5

我遇到的唯一问题是缺少jQuery

Javascript - 在每次鼠标悬停时生成新颜色

5 个答案: