Изменение CSS в нескольких местах при наведении (требуется решение jquery)

Question

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

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

Итак, я ищу JQuery, как это сделать. Есть предложения?

Вот пример HTML:

<div class="imgGallery">
 <img class="page-item-54" src="/image1.jpg">
 <img class="page-item-66" src="/image2.jpg">
<div>

Когда кто-то наводит курсор на конкретное изображение выше, оно меняет CSS на изображении ниже:

<ul class="pageNav">
 <li class="page-item-54">Sub Gallery 1</li>
 <li class="page-item-66">Sub Gallery 2</li>
</ul>

Спасибо! Трой

Answer 1

Вы можете использовать функцию jQuery hover, чтобы подключать обработчики для событий mouseenter и mouseleave изображений (которые jQuery с удовольствием симулирует в браузерах, которые их не поддерживают) :

$(".imgGallery img").hover(
    function() {
        // Code for when the hover starts, the (raw) hovered `img`
        // element is `this`, from which we can get the class name
        // to feed into a selector for finding the relevant `li`
        $(".pageNav ." + this.className).css(/* your change here */);
    },
    function() {
        // Code for when the hover ends, the (raw) unhovered `img` 
        // element is `this`
        $(".pageNav ." + this.className).css(/* your change here */);
    }
);

Вот живой пример с только одним pageNav и ревизией с несколькими pageNavs, чтобы показать, что он обновляет несколько местоположений одновременно.

mouseenter и mouseleave (нововведения в IE, которые до сих пор не поддерживаются многими браузерами, но которые JQuery предоставляет в случае отсутствия), гораздо менее сложны для работы с такими вещами, чем mouseover и mouseout, начиная с mouseover и mouseout пузырь. (В вашем случае это может не иметь большого значения, так как вы используете img s; если бы вы использовали элементы, которые могли иметь дочерние элементы, это имело бы большое значение.)

Answer 2

Вот возможное решение.

Возможно, вы захотите изменить <ul class="pageNav"> на <ul id="pageNav"> (если вы точно не знаете, что никогда не будете дублировать этот класс).

Редактировать: обновлено, чтобы учесть несколько классов в теге img.

$(function() {
    var $pageNav = $('.pageNav');
    // hook up hover function to all images under the imgGallery class
    $('.imgGallery').find('img').hover(function() {
        // find "page-item-" class
        var pageItemClassName = this.className.replace(/.*(page-item-\d+).*/, "$1");
        // toggle hovered class on matching item under unordered list
        $pageNav.find('.' + pageItemClassName).toggleClass('hovered');
    });
});​

Затем вы можете создать класс hovered css, который будет применяться при наведении курсора. Например:

.pageNav .hovered {
    background-color: #009900;
}

Answer 3

В этом скрипте jQuery я добавляю и удаляю второй класс класса «over», который можно соответствующим образом стилизовать.

$(function () {

    $('div.imgGallery img').hover(
        function () {
            $('ul.pageNav li[class=' + $(this).attr('class') + ']').addClass('over');
        },
        function () {
            $('ul.pageNav li[class=' + $(this).attr('class') + ' over]').removeClass('over');
        });

});

Answer 4

Вы можете подделать CSS HOVER с кодом ниже

$(document).ready(function() {

    var images = $(".imgGallery img");

    $.each(images, function(i, item) {      
        $(item).mouseover(function() {
            $(this).css({
                "background-image": "url('alternate_image.png')",
                "background-repeat": "no-repeat"
            });
        }).mouseout(function() {
            $(this).css({
                "background-image": "url('original_image.png')"
            });

        });
    });

});