Как показать случайный цвет при наведении на CSS?

Ответ 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;
}

Вот обновленная рабочая скрипта: https://jsfiddle.net/6n0tk3a3/1/

ИЗМЕНИТЬ

Здесь одно и то же, используя чистый javascript - no 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, я не буду публиковать его. Вот рабочая скрипка: 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/

Ответ 2

Я думаю, вы можете достичь этого, используя jquery или Javascript, так как у вас нет таких функций с CSS

вы можете динамически назначать имена классов с помощью jquery для каждой активности зависания и добавлять к этому классу различные цвета

Отношения Арджун

Ответ 3

Этот javascript настраивает массив цветов, затем случайным образом выбирает один из них и применяет его при наведении. Затем он возвращает его в нормальное состояние, когда вы перестаете зависать.

var colors = ['blue','green','red','purple','yellow'];

$('.MenuBox').mouseenter(function() {
    var rand = colors[Math.floor(Math.random() * colors.length)];
    $(this).css('background-color', rand);
});

$('.MenuBox').mouseleave(function() {
    $(this).css('background-color', '');
});

Ответ 4

Вы можете использовать jQuery для выбора элемента, который вы хотите навести, и выполнить функцию, которая генерирует случайные шестнадцатеричные коды. Затем установите цвет div на то, что сгенерировано.

Ответ 5

Я считаю, что для этого вам понадобится jQuery,

JS

function startAnimation(o) {
    var hue = 'rgb('
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ')';
    $(o.currentTarget).animate( { color: hue }, 500, function() {
        startAnimation(o);
    });
}

$(document).ready(function() {
    $('a').hover(
        startAnimation,
        function() {
            $(this).stop().animate( { color: '#000' }, 500);
        }
    );
});