Как сделать несколько :hover к одному элементу?

Question

[Борис Белов]

Доброго времени суток.
Нужна помощь.

jsfiddle.net/m3bL5omd

Есть текст, с подложкой.
Мне надо чтобы когда я навожу на текст подложка вначале сменилась на цвет1, потом цвет2, затем цвет3 и так далее.

Как это сделать?

----

jsfiddle.net/neeklamy/3eXfk нашел такой пример, но он красит border, а мне надо background-color

----

jsfiddle.net/3eXfk/165 - чуть похимичил, получилось почти то. Теперь нужно, чтобы когда отвожу мышку, то цвет не возвращал в стандартный.

Answer 1

[Борис Белов]

<div id="projectThumbs">
    <div class="wrapper"> <a class="project">
        <div class="intrinsic" style=""></div>
      </a> 
    </div>
</div>

.intrinsic {
    background-color: #2A3139;
    box-shadow: none;
    width: 200px;
    height:200px
}

var randomLinks = $('#projectThumbs .intrinsic');
var original = randomLinks.css('background-color');
var colors = ['#f9c213', '#f35c4a', '#3da1bf', '#827287'];

randomLinks.hover(function () { //mouseover
    var col2 = Math.floor(Math.random() * colors.length);
    var newcolor = '' + colors[col2];
    $(this).css('background-color', newcolor);
}, function () { //mouseout
    $(this).css('background-color', newcolor);
});

Comments

[Nikolay Talanov]

Не делайте так никогда, когда можно сделать куда более адекватный и быстрый вариант на чистом css.

[Борис Белов]

Nikolay Talanov: как?

[Евгений Петров]

keyframes + animation-fill-mode

[Alexander Lead]

Эту функцию не обязательно писать вообще - это лишнее в коде: function () { //mouseout
$(this).css('background-color', newcolor);
}

Answer 2

[gleendo]

Смена цвета, но думаю это не то что тебе нужно.
@keyframes animation-color {
0% {background: red;}
10% {background: yellow;}
20% {background: blue;}
30% {background: green;}
40% {background: red;}
50% {background: lightblue;}
60% {background: lime;}
..........
100% {background: yellow;}
}

Comments

[Борис Белов]

я выше выложил)

[Евгений Петров]

iborisbelov: Человек дело написал. Осталось добавить animation-fill-mode и будет то, что нужно.
А вы гадость выложили.

[Alexander Lead]

Евгений Петров: что-то вы зря автора корите, у него задача, чтобы цвет менялся при наведении, а не анимацию. CSS - это замечательно, но он даст на замену только один цвет, да и то на в режиме hover

[gleendo]

Alexander Lead: ТС просто написал не очень понятно. "Мне надо чтобы когда я навожу на текст подложка вначале сменилась на цвет1, потом цвет2, затем цвет3 и так далее." Как я понял, что при наведении цвет должен меняться один за другим. При использовании анимации, так и будет. Но как оказалось автору необходимо изменение цвета при повторном наведении, что не было написано в Вопросе.

[Борис Белов]

Евгений Петров: мне нужно, чтобы навел мышкой на элемент и у него сменился background, отвел мышку и он должен остаться, затем снова наводим, и снова меняется. И так далее.

Answer 3

[Alexander Lead]

// $(this).css('background-color', original); - эту строку удали, или вообще функцию, тогда цвет не будет возвращаться