Eu estive pesquisando, mas fiquei em branco e estou pensando se posso usar uma instrução jQuery para direcionar vários elementos em uma página. Eu tenho vários botões idênticos em uma página e eles são compostos de um plano de fundo esquerdo, central e direito, onde o meio contém o texto e pode ser expandido para qualquer tamanho necessário. Cada um tem um ID e / ou classe exclusivos. Eu o tenho configurado agora para que, quando você passa o mouse sobre o contêiner deles, os 3 planos de fundo sejam alterados para dar a aparência de que os botões estão em um estado diferente. A maneira como isso é feito agora é com uma chamada instantânea para cada botão localizado por Classe (prefere usar ID, mas você não pode ter vários elementos com o mesmo ID). Essa passagem é seguida por 8 eventos. Uma mudança de plano de fundo para cada esquerda e meio direita e uma mudança de cor para o texto intermediário.

Isso significa muitas linhas de código. O que eu quero é poder chamar todos os botões de uma só vez com o evento hover ou fazer com que o evento hover, de alguma forma, saiba qual botão está passando o mouse e lançar essa classe ou ID ou mesmo o nome de volta ao jQuery, que pode alterar o subclasses de botões para a esquerda e o meio direito. A subclasse para a esquerda e a direita são idênticas em todos os botões, portanto, se o evento hover pudesse ser focado em qualquer evento chamado, eu precisaria apenas de um conjunto de chamadas para alterar os atributos de segundo plano ... O código atual está abaixo para dois dos botões ...

$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)"});
        }
    );