如何在CSS中的悬停上显示随机颜色? [英] How to show random color on hover in CSS?

问题描述

我有这个CSS代码，只有当鼠标悬停时才显示一种颜色(蓝色).

I have this CSS code that only displays one color (blue) when there's a mouse hover.

.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，对不起这个问题.我仍在学习编程语言.

I want to show a random color every time there's a mouse hover on that div how do I do that? I don't think it's possible to use CSS only, sorry for the dumb question. I'm still learning about programming languages.

更新:

我不想更改background-color，但是我想更改颜色:

I don't want to change the background-color but I want to change the color in:

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

我该怎么做?

推荐答案

这是我将如何使用javascript和jquery进行操作(不是必需的，但更简单).

html:

Here is how I would do it with javascript and jquery (not required but simpler).

html:

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

javascript:

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/

Here is the updated working fiddle: https://jsfiddle.net/6n0tk3a3/1/

这是使用纯JavaScript的相同的东西-没有jquery-以及您提供的类名和CSS.

第一个html:

Here is the same thing using pure javascript - no jquery - and your provided class names and css.

First html:

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

JavaScript:

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紧接在body标记之前，以便在尝试绑定到其中的任何元素之前，先加载页面上的所有元素.

Since I used your css I won't post it. Here is the working fiddle: https://jsfiddle.net/6n0tk3a3/2/

In your comment you said you want them all in the same file. Though you can do this I would advise against it as it is usually considered bad practice. If you do decide to do it then make sure your javascript goes right before the closing body tag so that all the elements on the page are loaded before it tries to bind to any of them.

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

If you want the color to box shadow to disappear once your mouse is no longer hovering add this to the for loop:

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/

Here is a working fiddle: https://jsfiddle.net/6n0tk3a3/25/

这篇关于如何在CSS中的悬停上显示随机颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！