html - 悬停一个元素应激活同一类别的所有元素

我有一堂课-我们称它为.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 {...}

问题：仅对所有下一项生效。

最佳答案

...否则您将需要使用jQuery。但是，如果您可以使用CSS完成同一件事，那我就走那条路。

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

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

});

示例：http://jsfiddle.net/ggjRG/1/