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

});

CSS：

#random {

width: 200px;

height: 200px;

border: 1px solid black;

}

编辑

这是同样的事情使用纯JavaScript – 没有jquery – 和你提供的类名称和css.First html：

使用Javascript：

var menuBoxes = document.getElementsByClassName('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;

}

}

因为我使用你的css我不会发布.这是工作小提琴：https://jsfiddle.net/6n0tk3a3/2/

在你的评论中你说你希望他们都在同一个文件中.虽然你可以做到这一点,我建议反对它,因为它通常被认为是坏习惯.如果你决定这样做,那么确保你的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";

}