window.onload = function() {
$('.box').hover(
function () {
$('.box').css('background', 'white');
}
)
}
1 ответ
Во-первых
$('.box').css('background', 'white');
равносилен вот такой записи:<sometag style="background: white">Тут текст какой-то</sometag>
то есть жестко прописывается атрибут
style
.Во-вторых
hover
в вашем варианте (т.е. видаhover(handlerInOut(eventObject)
) устанавливает функциюhandlerInOut
в качестве обработчика обоих событий (mouseenter и mouseleave). Соответственно вы постоянно ставитеstyle
- вошёл курсор мыши в элемент или вышел.
Можно воспользоваться вариантом hover(handlerIn(eventObject), handlerOut(eventObject)):
, где одна функция отвечает за вход (mouseenter), другая за выход (mouseleave) мыши с контура элемента.
Ну и классы лучше писать сразу в CSS и манипулировать чисто ими:
$('.box').hover(function () {
$(this).addClass('test');
}, function() {
$(this).removeClass('test');
});
.box {
background: green;
}
.test {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">234243</div>
Кстати, $( selector ).hover( handlerIn, handlerOut )
— это просто сокращенная запись вот такого вида:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
.css(
что жестко прописывает атрибутstyle
у элемента.... Аhover
тут не при чём