Как заставить фон div измениться при наведении мыши на ссылку - с помощью jQuery?

Question

Мне нужно иметь возможность изменить положение фонового изображения в содержащем элементе div, когда наведу курсор мыши на ссылку в этом элементе div.

Вот страница : это двасиние кнопки воспроизведения посередине справа.

Я уже работал раньше, но он не работает, и я не могу заставить его работать должным образом.

Вот HTML:

<div class="h-video">
<p><a class="play-video" href="#flashArea3">Secondary headline goes here to say something you want. This needs to grab their attention.</a></p>
</div>

Вот jQuery:

$(".h-video").hover(function() {
 $(this).closest("div").css({ 'background-position': 'top center' });
    }, function() {
 $(this).closest("div").css({ 'background-position': 'bottom center' });
});

Буду признателен за любую помощь.

Спасибо.

Answer 1

Зачем использовать JavaScript?Вы можете сделать это только в CSS, хотя IE6 не будет поддерживать его в элементе <div>.

Пример: http://jsfiddle.net/yr4yH/1/

CSS изпример выше:

.h-video {
    width: 461px;
    height: 67px;
    background-image: url("http://www.theideapeople.com/projectpath/ideapeople-new/_images/btn_video-home.png");
    background-position: bottom center;
    background-repeat: no-repeat
}

.h-video:hover {
    background-position: top center;
}​

Если вам нужна поддержка IE6, я уверен, что вы могли бы переработать свой макет, чтобы .h-video был элементом <a> вместо <div>.

Answer 2

Пара нот:

1. Вы поменялись местами: «центральная верхняя часть», а не «верхняя часть центра» и «центральная нижняя часть», а не «нижняя часть центра».1006 *

2. Используйте addClass и RemoveClass.Не устанавливайте стили в строке.Используйте его так же, как в примере на docs.jquery.com.

3. Если вам не нужна поддержка IE, используйте объявление CSS без JavaScript.

Answer 3

Я оставлю отдельный ответ для этого решения, но я бы все же сказал использовать CSS вместо javascript .

Ваш код, который затем назначает обработчики с .hover(), выполняется до загрузки элементов. В противном случае ваш код правильный.

В приведенном ниже примере кода ваш код заключен в $(function() { ... });, что является ярлыком для jQuery .ready() метода , который обеспечивает загрузку документа до запуска кода.

   // Wrap your code like this so it doesn't run until the DOM is ready
$(function() {
    $(".h-video").hover(function() {
     $(this).closest("div").css({ 'background-position': 'top center' });
        }, function() {
     $(this).closest("div").css({ 'background-position': 'bottom center' });
    });
});

Кроме того, jQuery .closest() метод здесь не нужен, но он также не повредит. Можешь удалить его.