懸停一個項目要激活所有項目使用同一類

我有一類 - 讓我們稱之爲.purple和我有幾個項目與此類懸停一個項目要激活所有項目使用同一類

<img src="..." class="switch_purple"> 

<p class="purple"> Purple</p> 
<p class="purple"> Purple</p> 
<p class="green"> Green</p> 
<p class="purple"> Purple</p> 
<p class="green"> Green</p> 
<p class="purple"> Purple</p>

我想要做的是，不使用JavaScript的：

徘徊與.purple類項目將徘徊所有同一類的
與.switch_purple懸停圖像將徘徊所有.purple類的

[更新]第一種方式工作：

.purple:hover ~ .purple, .purple:hover {...}

問題：只需要下一個全部項目的效果。

來源

2014-02-23 Fridleif

使用css僞類：hover – Sai

@Sai不，這不起作用，因爲：只有當您將鼠標懸停在父元素上方時，懸停才起作用。他試圖使用：懸停爲同齡人和非家庭元素..你不能只用CSS做到這一點......但你可以用jQuery – CRABOLO

沒有JavaScript，我想不出一種方法來做到這一點。您可以添加CSS來定義項目在徘徊時的外觀。您需要一種腳本語言才能真正引起用戶不與之交互的項目的懸停效果。 –

沒有JavaScript就可以達到最接近的事是這樣的使用一般的兄弟組合子選擇：http://jsfiddle.net/6gEC8/

.switch_purple:hover ~ .purple, 
.purple:hover, 
.purple:hover ~ .purple { 
    text-decoration: underline; 
}

的問題是，只有p的懸停元素之後得到的效果.. 。

來源

2014-02-23 01:22:15

根據您的要求，這是最接近你可以有沒有使用JavaScript ... – 707

@ user3342174請檢查這是否它回答你的問題 –

...或者你需要使用jQuery。但是如果你能用CSS完成同樣的事情，我會走這條路。

// find .switch_purple, apply hover event 
$('.switch_purple').hover(function(){ 

    // toggle .active class 
    $('.purple').toggleClass('active'); 

});

實施例：http://jsfiddle.net/ggjRG/1/

來源

2014-02-23 01:26:56 printr

這是可能與CSS只，使用〜（兄弟姐妹）選擇器。會以選擇的類中的任何p元素「紫，只要他們遵循IMG

.switch_purple {width: 50%; height: auto;} 
.purple:hover, 
.switch_purple:hover ~ p.purple { 
    color: purple; 
}

看到這裏的JS小提琴：http://jsfiddle.net/z59tq/3/

來源

2014-02-23 01:28:29 JohanVdR

這是不可能的使用CSS（據我所知）如果你要使用JavaScript，你可能會（使用jQuery時）寫這樣的代碼：

$("p").hover(function() { 
    $($(this).prop("class").replace(/(.+?)(\s|$)/g, ".$1")).addClass("active"); 
}, function() { 
    $($(this).prop("class").replace(/(.+?)(\s|$)/g, ".$1")).removeClass("active"); 
}); 

$(".switch_purple").on("mouseenter mouseleave", function(evt) { 
    $(".purple").trigger(evt.type); 
});

這實際上適用於所有類別，所以當你將鼠標懸停與.purple類DOM節點，它會強調所有與該類有關的元素。發生什麼事情是，當你喲將鼠標懸停在一個元素上，它會將元素的當前類名稱替換爲選擇器（因此purple變爲.purple），然後向其添加類.active。

當有人離開DOM節點時，會發生相反的情況（然後刪除.active）。

最後一部分是.switch_purple元素的代碼。這樣做甚至更容易，它只會觸發.purple元素的懸停代碼。我也做了JSFiddle。

來源

2014-02-23 02:01:52 g00glen00b

懸停一個項目要激活所有項目使用同一類

回答

相關問題