JQuery实现Div鼠标悬停时固定单一随机颜色的技术咨询

完全可以实现这个需求！你的原代码问题出在mouseover事件上——这个事件在鼠标在元素内部移动时会反复触发，所以每次移动都会重新生成颜色。我们只需要做两个小修改就能搞定：

修改思路 #

1. 把mouseover换成mouseenter：这个事件只会在鼠标首次进入元素时触发一次，元素内部移动不会重复触发，刚好符合你“悬停期间颜色固定”的要求。
2. 用$(this)代替$('.box')：确保只修改当前悬停的那个div，避免多个.box元素时互相影响。

修改后的完整代码 #

JavaScript #

$(document).ready(function(){
  $('.box').mouseenter(function(){
    var back = ["#B98B91","#A5465F","#A31E64","#F4C181","#F28C54","#F39131"];
    var color = back[Math.floor(Math.random() * back.length)];
    // 只修改当前悬停的box元素
    $(this).css("background-color", color);
  });
});

CSS #

.box {
  border: solid;
  padding: 1rem; /* 加个内边距方便测试悬停效果 */
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <p>BLA BLA BLA</p>
</div>
<!-- 如果有多个box，每个都会独立生成随机色 -->
<div class="box">
  <p>ANOTHER BOX</p>
</div>

额外优化（可选） #

如果你希望鼠标离开后，元素恢复原来的颜色，可以再加一个mouseleave事件：

$('.box').mouseleave(function(){
  $(this).css("background-color", ""); // 清空背景色，恢复默认
});

这样每次鼠标进入.box时，会随机选一个颜色并保持到鼠标离开，完美符合你的需求～

内容的提问来源于stack exchange，提问作者user_1330