javascript - 从一组颜色更改悬停时 div 的背景颜色

Question

我是 jQuery 的新手，我正在这里进行一些试验。请耐心等待。

我试图在悬停时为 div 提供“随机”背景色。如果 div 没有悬停，我希望它们是白色的。

我意识到 random 在这里可能不是正确的词，因为我希望脚本从以下数组中选择一种颜色，最好以相同的顺序:['#009c61', '#cc0099'、'#cc9900'、'#cc0033'、'#0099cc'、'#6600cc'、'#66cc00']

我猜有些问题是因为所有的 div 都有相同的类。

如何使用 jQuery 实现这一点？

jQuery(document).ready(function($) {

  var bgColorArray = ['#009c61', '#cc0099', '#cc9900', '#cc0033', '#0099cc', '#6600cc', '#66cc00'],
    selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)];

  $('.article-container').css('background-color', selectBG)

});

.article-container {
  color: #000;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  height: 200px;
  width: 200px;
  border: solid 3px #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article-container">Div 1</div>
<div class="article-container">Div 2</div>
<div class="article-container">Div 3</div>
<div class="article-container">Div 4</div>

到目前为止我已经试过了:

    jQuery(document).ready(function($) {

  var bgColorArray = ['#009c61', '#cc0099', '#cc9900', '#cc0033', '#0099cc', '#6600cc', '#66cc00'],
    selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)];

  $('.article-container').css('background-color', selectBG)

});

问题是这会改变页面刷新时的颜色，并且会改变所有 div 的背景颜色。

Answer 1

在此上下文中尝试使用 .hover(mouseInHandler,mouseOutHandler) 函数，

var colors = ['#009c61', '#cc0099', '#cc9900', '#cc0033', '#0099cc', '#6600cc', '#66cc00'];
$(".article-container").hover(function() {
    $(this).css("background-color", colors[(Math.random() * colors.length) | 0])
}, function() {
    $(this).css("background-color", "")
});

DEMO