[英]Change background color of a div on hover from an array of colors
我是 jQuery 的新手,我在这里进行了一些试验。 请耐心等待。
我试图在悬停时给 div 一个“随机”的背景颜色。 如果 div 没有悬停,我希望它们是白色的。
我意识到随机在这里可能不是正确的词,因为我希望脚本从以下数组中选择一种颜色,最好按照相同的顺序: ['#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 颜色。
尝试在此上下文中使用.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", "")
});
查询:
$(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得到它
很酷的主意。 我只是想尝试做一些漂亮的东西。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.