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的bg颜色。

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

Answer 2

Take a look at this

Jquery：

$(document).ready(function()
{
    $("a").hover(function(e)
    {
        var randomClass = getRandomClass();
        $(e.target).attr("class", randomClass);
    });
});

function getRandomClass()
{
     //Store available css classes
     var classes = new Array("green", "purple", "teal", "violet", "pink");

     //Give a random number from 0 to 5
     var randomNumber = Math.floor(Math.random()*6);

     return classes[randomNumber];
}

CSS：

a.green:hover { color: #1ace84; }
a.purple:hover { color: #a262c0; }
a.teal:hover { color: #4ac0aa; }
a.violet:hover { color: #8c78ba; }
a.pink:hover { color: #d529cd; }

在谷歌搜索并从Telmo

获取

Answer 3

很酷的主意。我只是想做一些漂亮的东西。

var numberOfBlocks= 250;
var colors = ['#009c61','#cc0099','#cc9900','#cc0033','#0099cc','#6600cc','#66cc00'];
var lastColor = 0;

(function init() {
  var wrap = document.getElementById('wrap');
  var block = document.createElement('div');
  block.setAttribute('class', 'block');
  for(var i=0; i<numberOfBlocks; i++) {
    wrap.appendChild(block.cloneNode(true));  
  }
  $('.block').hover(function() {
    $(this).css('background-color', colors[lastColor++])
    lastColor = (lastColor>=colors.length?0:lastColor);
  },
  function() {
    $(this).css('background-color', '#fff');
  });
})();

.block {
   width: 20px;
   height: 20px;
   border: 1px solid white;
   display: inline-block;
   margin-top: -5px;
   margin-left: -1px;
   transition: all .1s ease-in-out;
 }

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

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

3 个答案:

DEMO