He estado buscando, pero me he quedado en blanco y me pregunto si puedo usar una declaración jQuery para apuntar a múltiples elementos en una página. Tengo varios botones idénticos en una página y cada uno está formado por un fondo izquierdo, medio y derecho donde el medio contiene el texto y se puede expandir a cualquier tamaño necesario. Cada uno tiene una identificación y / o clase única. Lo tengo configurado ahora para que cuando pases el mouse por encima de su div contenedor, los 3 fondos cambien para dar la apariencia de que los botones están en un estado diferente. La forma en que se realiza ahora es con 1 llamada de desplazamiento para cada botón ubicado por Clase (preferiría usar ID pero no puede tener varios elementos con la misma ID). Este desplazamiento es seguido por 8 eventos. Un cambio de fondo para cada derecha, izquierda y centro, y un cambio de color para el texto de las medias.

Esto significa muchas líneas de código. Lo que quiero es poder llamar a todos los botones a la vez con el evento hover o hacer que el evento hover sepa de alguna manera qué botón se está moviendo sobre y lanzar esa clase o id o incluso su nombre de nuevo a jQuery, que luego puede cambiar el Botones de subclases para derecha izquierda y centro. La subclase de derecha, izquierda y centro son idénticas en todos los botones, por lo que si el evento de desplazamiento se centre en cualquier evento que se llame, solo necesito un conjunto de llamadas para cambiar los atributos de fondo ... El código actual se encuentra abajo para dos de los botones ...

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