如何在悬停时突出显示多个跨度标签？答案

【问题标题】：How can I highlight multiple span tags on hover?如何在悬停时突出显示多个跨度标签？
【发布时间】：2014-10-20 20:00:47
【问题描述】：

我不确定这是否可能，但是，如果我在这样的标签内放一些文本；

The quick brown fox jumps over the angry dog

我在 css 中有这个；

span:hover{ 
    background-color: green;
}

我怎样才能使当我将鼠标悬停在“棕色”或“上方”上时，它们都会突出显示？

【问题讨论】：

我认为不使用js是不可能的。
简单地用这个； div：悬停跨度{背景颜色：绿色； }

标签： html css hover highlight

【解决方案1】：

没有previous sibling selector，您可以使用General sibling selector 来定位以下s，如下所示：

span:hover,
span:hover ~ span {
    background-color: gold;
}

EXAMPLE HERE

或者在整行上触发:hover 效果，用附加元素包装它们，例如 然后使用 :hover 伪元素作为包装器，如下所示：

EXAMPLE HERE

<p>The quick <span>brown</span> fox jumps <span>over</span> the angry dog</p>

p:hover span { 
    background-color: green;
}

【讨论】：

当你“悬停”其他词时，这也会改变背景，比如“狗”，对吧？
当他也将“快速”文本悬停时，此解决方案将生效。
兄弟姐妹选择器仅适用于下一个兄弟姐妹而不是前一个。
好的，所以你说的第一件事效果很好，除了当我将光标移到第二个或第三个跨度词上时，它前面的那些没有突出显示。还有 ~ 做什么？我以前从未见过——
@thyme A ~ B 仅当 B 前面是 A 而他们是兄弟姐妹时才匹配。

【解决方案2】：

您正在寻找的确切行为不能仅通过 CSS 实现，但可以通过简单的 jQuery 实现：

DEMO

$('span').hover(function(){
    $('span').css("background-color", "green");
}, function(){
    $('span').css("background-color", "none");
});

如果你有几个句子，你使用：DEMO

$('span').hover(function(){
    $(this).parent().children('span').css("background-color", "green");
}, function(){
    $(this).parent().children('span').css("background-color", "none");
});

【讨论】：

我会把它放在哪里？我以前从未使用过 jQuery
@thyme 我无法在 cmets 中解释这一点，但您可以在此页面上找到使用 jQuery 的基础知识learn.jquery.com/about-jquery/how-jquery-works

【解决方案3】：

我正要发布与 web-tiki 相同的内容...但是为跨度而不是 css 属性添加了一个类，因为我更喜欢它更好地用于仅使用 css 表对“悬停”效果的未来更改

$("span").hover(function() {
$('span').addClass( "SpanClass2" );
}, function() {
$('span').removeClass( "SpanClass2" );
});

http://jsfiddle.net/wr1z8h0a/1/

【讨论】：

换班是个好主意+1。对于几句话，你可以做jsfiddle.net/webtiki/wr1z8h0a/3

【解决方案4】：

试试这个。

Working Fiddle

div:hover span{ 
    background-color: green;
}

祝你好运！

【讨论】：