javascript - 将鼠标悬停在一个跨度上，然后通过添加和删除类来更改该跨度以及另一个跨度的背景颜色

Question

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

如何将鼠标悬停在其中任何一个上并将两者的背景颜色更改为黄色。我无法使用 onmouseout() 因为背景颜色会因其他脚本而动态变化。我知道我可以添加一个类来跳过 jQuery 的使用 - 尽管如果其他方法都失败了，这是一个有效的选择 - 通过使用类似以下内容:

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

CSS 为:

.yellow {
background-color: yellow
}

我之前包含 onmouseout() 的解决方案是:

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

和 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

使用 JQuery hover 函数代替。

试试这个:

$(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)

更新#1

使用toggleClass()函数代替。

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

<强> JSFiddle Demo

更新#2

为所有需要突出显示的span分配一个class。例如:class="highlight"。使用 toggleClass() 从 CSS 切换 class 将添加另一个类。这样只有 span 和 .highlight 才会改变颜色。

<强> JSFiddle Demo