在同一个div中以固定的随机颜色悬停

Question

我使用JQuery设置一个带有随机颜色的悬停，通过这个代码，如果我移动鼠标，就可以在同一个div中设置几种颜色。

我的目标是每次在同一个div中只有一种固定的颜色，如果鼠标不离开div，颜色必须保持不变？

请问你有什么主意吗？

null

    $(document).ready(function(){
  
  $('.box').mouseover(function(){
        var back = ["#B98B91","#A5465F","#A31E64","#F4C181","#F28C54","#F39131"];
        var color = back[Math.floor(Math.random() * back.length)];
        $('.box').css("background-color", color);
  });
  
  });

.box {border:solid;}

<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>

null

Answer 1

您只需要使用这个事件侦听器。mouseEnter

参见：鼠标翻转、鼠标进入

null

$(document).ready(function() {
    var back = ["#B98B91", "#A5465F", "#A31E64", "#F4C181", "#F28C54", "#F39131"],
    color;

  $('.box').mouseenter(function() {
    color = back[Math.floor(Math.random() * back.length)];
    $('.box').css("background-color", color);
  });

  $('.box').mouseleave(function() {
    $('.box').css("background-color", "white");
  });

});

.box {
  border: solid;
}

<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>