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

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

<强> JSFiddle Demo

Answer 2

这可以通过CSS调整你的HTML来完成：

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

对于CSS：

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

因此，您将两个跨度包装到标识为bghover的span或div中，该标识仅用作CSS :hover的触发器。如果没有悬停，#bghover内的所有跨度都是白色的，如果有悬停（类似于onmouseover），#bghover内的所有跨度都是白色。

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

2 个答案: