html - 如何在 CSS 中悬停时显示随机颜色？

Question

我的 CSS 代码在鼠标悬停时只显示一种颜色(蓝色)。

.MenuBox {
    transition: all 1.0s ease;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    border: #solid 10px #000;
    background-color: rgba(255,255,255,0.5);
    width:auto;
    height:auto;
    margin-left: auto ;
    margin-right: auto ;
    padding:10px;
    display: inline-block;
}
.MenuBox:hover{
    transition: all 1.0s ease;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
    -moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 255, 0.67);
    box-shadow:         0px 0px 30px 0px rgba(0, 0, 255, 0.67);
}
.MenuBox:last-of-type:hover{

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
    -moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 255, 0.67);
    box-shadow:         0px 0px 30px 0px rgba(0, 0, 255, 0.67);
} 

我想在每次鼠标悬停在 div 上时显示随机颜色，我该怎么做？我不认为只使用 CSS 是可能的，很抱歉这个愚蠢的问题。我仍在学习编程语言。

更新:

我不想更改 background-color 但我想更改以下颜色:

-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 255, 0.67);
box-shadow:         0px 0px 30px 0px rgba(0, 0, 255, 0.67);

我该怎么做？

Answer 1

下面是我将如何使用 javascript 和 jquery 来实现(不是必需的，但更简单)。

html:

<div id="random"></div>

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

这是更新后的工作 fiddle :https://jsfiddle.net/6n0tk3a3/1/

编辑

这是使用纯 javascript - 没有 jquery - 以及您提供的类名和 css 的同一件事。

第一个 html:

<div class="MenuBox"></div>
<div class="MenuBox"></div>
<div class="MenuBox"></div>

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，所以我不会发布它。这是工作 fiddle :https://jsfiddle.net/6n0tk3a3/2/

在您的评论中，您说您希望将它们全部放在同一个文件中。虽然你可以这样做，但我建议不要这样做，因为这通常被认为是不好的做法。如果您确实决定这样做，那么请确保您的 javascript 恰好位于结束 body 标记之前，以便在它尝试绑定(bind)到任何元素之前加载页面上的所有元素。

编辑#2

如果您希望鼠标不再悬停时框阴影的颜色消失，请将此添加到 for 循环:

menuBoxes[i].onmouseout = function(e) {
    this.style['box-shadow'] = "none";
    this.style['-webkit-box-shadow'] = "none";
    this.style['-moz-box-shadow'] = "none";
}

这是一个有效的 fiddle :https://jsfiddle.net/6n0tk3a3/25/