0
window.onload = function() {
  $('.box').hover(
    function () {
      $('.box').css('background', 'white');
    }
  )
}
4
  • потому что ты сам жестко прописываешь .css( что жестко прописывает атрибут style у элемента.... А hover тут не при чём Commented 16 июн. 2017 в 18:37
  • Сначала цвет элемента серый, потом при первом наведении стает белый. Так почему hover не при чем?
    – Babin
    Commented 16 июн. 2017 в 18:40
  • 1
    ты читать умеешь? см. выше Commented 16 июн. 2017 в 18:40
  • ну плюс к тому, hover принимает две функции - одна срабатывает на вход курсора в элемент, другая на выход..... на вход ты написал, на выход - нет (например чтоб сбросить стиль) Commented 16 июн. 2017 в 18:49

1 ответ 1

2
  • Во-первых $('.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);
0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.