将鼠标悬停在一个跨度上，并通过添加和删除类来更改该跨度和另一跨度的背景色

Question

<span id="english">Yes</span>
<span id="spanish">Sí</span>

How can I hover over any of these and change background color to yellow on both. I can't use onmouseout() because the background color changes dynamically due to other scripts. I'm aware that I can add a class skipping the use of jQuery -although it's a valid choice if all else fails- by using something like:

document.getElementById(id).className += " yellow";

and the css would be:

.yellow {
background-color: yellow
}

My previous solution that included onmouseout() was:

function chbg(color, id1, id2) {
document.getElementById(id1).style.backgroundColor = color;
document.getElementById(id2).style.backgroundColor = color;
}

and the HTML:

<span id="english" onmouseover="chbg('yellow', 'english', 'spanish')"      onmouseout="chbg('white','english', 'spanish')">Yes</span>
<span id="spanish" onmouseover="chbg('yellow', 'english', 'spanish')" onmouseout="chbg('white','english', 'spanish')">Sí</span>

Answer 1

Use JQuery hover function instead.

Try this:

$(document).ready(function(){
    $("span").hover(
    function(){
        $('span').css('background', 'yellow');
    }, 
    function(){
        $('span').css('background', 'white');
    });
});

JSFiddle Demo #1 (With Class)

JSFiddle Demo #2 (Without Class)

UPDATE #1

Use toggleClass() function instead.

$(document).ready(function(){
    $("span").hover(function(){
        $('span').toggleClass('highlight');
    });
});

JSFiddle Demo

UPDATE #2

Assign a class to all the span that needs to be highlighted. For example: class="highlight" . Using toggleClass() to toggle a class from CSS will add another class now. This way only span with .highlight change color.

JSFiddle Demo

Answer 2

This can be done with only CSS, by adjusting your HTML a bit:

<span id="bghover">
    <span>Yes</span>
    <span>Sí</span>
</span>

And for the CSS:

#bghover span
{
    background-color: white;
}
#bghover:hover span
{
    background-color: yellow;
}

So you wrap the two spans into a span or div with id bghover , which is only used as a trigger for CSS :hover . If there's no hover, all spans within #bghover are white, if there is a hover (similar to onmouseover), all spans within #bghover are white.