HTML如何悬停变⾊,html–如何在CSS悬停上显⽰随机颜⾊？这是我将如何使⽤javascript和jquery(不需要，但更简单).html：
JavaScript的：
$('#random').on('mouseover',function() {
var color = '#'+Math.floor(Math.random()*16777215).toString(16);
var colorString = '0px 0px 30px 0px ' + color;
$('#random').css('box-shadow',colorString);
$('#random').css('-webkit-box-shadow',colorString);
$('#random').css('-mox-box-shadow',colorString);
});
box shadow怎么设置CSS：
#random {
width: 200px;
height: 200px;
border: 1px solid black;
}
编辑
这是同样的事情使⽤纯JavaScript – 没有jquery – 和你提供的类名称和css.First html：
使⽤Javascript：
var menuBoxes = ElementsByClassName('MenuBox');
for (var i = 0; i < menuBoxes.length; i++) {
menuBoxes[i].onmouseover = function(e) {
var color = '#'+Math.floor(Math.random()*16777215).toString(16);
var colorString = '0px 0px 30px 0px ' + color;
this.style['box-shadow'] = colorString;
this.style['-webkit-box-shadow'] = colorString;
this.style['-moz-box-shadow'] = colorString;
}
}
在你的评论中你说你希望他们都在同⼀个⽂件中.虽然你可以做到这⼀点，我建议反对它，因为它通常被认为是坏习惯.如果你决定这样做，那么确保你的javascript在关闭正⽂标签之前就可以了，所以页⾯上的所有元素都会被加载，然后再尝试绑定它们.
编辑#2
如果您希望将⿏标不再悬停将颜⾊添加到for循环中即可将颜⾊隐藏到阴影中：
menuBoxes[i].onmouseout = function(e) {
this.style['box-shadow'] = "none";
this.style['-webkit-box-shadow'] = "none"; this.style['-moz-box-shadow'] = "none"; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。