如何在懸停時突出顯示多個跨度標籤？

我不確定是否有可能，但是，如果我在這樣的標籤內放置了一些文本， ;如何在懸停時突出顯示多個跨度標籤？

The quick brown fox jumps over the angry dog

和我有這個在CSS;

span:hover{ 
    background-color: green; 
}

我怎麼能當我懸停在'棕色'或'結束'，他們都變得突出顯示？

來源

2014-08-27 thyme

我不認爲這是可能的，而不使用js。 – nfechner 2014-08-27 09:47:26

只需使用此; div：懸停跨度{background}顏色：綠色; } – 2014-08-27 09:50:06

沒有previous sibling selector，你既可以使用General sibling selector目標以下就像這樣：

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; 
}

來源

2014-08-27 09:38:24

這也會改變背景，當你'徘徊'其他字，如'狗'，對不對？ – Sugar 2014-08-27 09:41:20

此解決方案將在他推出「快速」文本時開始實施。 – 2014-08-27 09:41:28

更新了答案。 – 2014-08-27 09:44:24

嘗試只是這一點。

Working Fiddle

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

好運！

來源

2014-08-27 09:49:18

您正在尋找無法實現只能用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"); 
});

來源

2014-08-27 09:53:44

我會在那裏放置？我從未在 – thyme 2014-08-27 10:03:48

之前使用過jQuery @thyme我無法在註釋中解釋，但您可以在此頁面上找到使用jQuery的基礎知識http://learn.jquery.com/about-jquery/how-jquery -work/ – 2014-08-27 10:05:26

我即將發佈相同的web-tiki ...但添加一個類的CSS廣度保證的財產，因爲我更喜歡它使用只是在css表「懸停」效果的更好

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

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

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

來源

2014-08-27 10:04:38

班級更換是一個好主意+1。對於幾個句子，你可以做http://jsfiddle.net/webtiki/wr1z8h0a/3/ – 2014-08-27 10:08:44

如何在懸停時突出顯示多個跨度標籤？

回答

相關問題