html – 如何在CSS悬停上显示随机颜色？

发布时间：2020-12-14 18:56:32 所属栏目：资源来源：网络整理

导读：我有这个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,0.5); width:auto;

我有这个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,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.67);
    -moz-box-shadow:    0px 0px 30px 0px rgba(0,0.67);
    box-shadow:         0px 0px 30px 0px rgba(0,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.67);
}

我想要显示一个随机的颜色,每次有一个鼠标悬停在那个div我该怎么做？我不认为只能使用CSS,对于愚蠢的问题抱歉.我还在学习编程语言.

更新：

我不想改变背景颜色,但我想改变颜色：

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

我怎么做？

解决方法

这是我将如何使用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;
}

这是更新的工作小提琴：https://jsfiddle.net/6n0tk3a3/1/

编辑

这是同样的事情使用纯JavaScript – 没有jquery – 和你提供的类名称和css.First 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我不会发布.这是工作小提琴：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";
}

这是一个工作小提琴：https://jsfiddle.net/6n0tk3a3/25/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!