Я искал, но потерпел неудачу, и мне интересно, могу ли я использовать один оператор jQuery для таргетинга нескольких элементов на странице. У меня есть несколько идентичных кнопок на странице, и каждая из них состоит из левого, среднего и правого фона, где середина содержит текст и может расширяться до любого необходимого размера. Каждый из них имеет уникальный идентификатор и / или класс. Теперь я настроил его так, чтобы при наведении указателя мыши на их контейнер div 3 фона менялись, создавая впечатление, что кнопки находятся в другом состоянии. Теперь это делается с помощью 1 вызова при наведении курсора на каждую кнопку, которая находится в классе (лучше использовать идентификатор, но вы не можете иметь несколько элементов с одинаковым идентификатором). За этим парением следуют 8 событий. Изменение фона для каждого правого левого и среднего и изменение цвета для текста середины.

Это означает много строк кода. Я хочу, чтобы у меня была возможность вызывать все кнопки одновременно с событием hover или чтобы событие hover каким-то образом узнало, какая кнопка находится над кнопкой мыши, и выбросить этот класс или идентификатор или даже имя обратно в jQuery, который затем может изменить Кнопки подклассов для правого левого и среднего. Подкласс для правого левого и среднего одинаков на всех кнопках, поэтому, если событие наведения может быть сфокусировано на каком-либо событии, называемом им, мне понадобится только один набор вызовов для изменения атрибутов фона ... Текущий код ниже для двух из кнопок ...

$j(".learnMoreButton").hover(
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css("color", "#666");
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );

$j(".bioButton").hover(
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.bioButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.bioButton .buttonMiddle a').css("color", "#666");
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );