Question

我上了一堂课 - 让我们称之为.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 {...}

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

Answer 1

如果没有javascript，你可以使用一般兄弟组合选择器来实现最接近的事情：http://jsfiddle.net/6gEC8/

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

问题是在悬停元素之后只有p才能生效...

Answer 2

...或者你需要使用jQuery。但如果你能用CSS完成同样的事情，那我就走那条路。

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

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

});

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

Answer 3

只能使用CSS，使用〜（兄弟）选择器。它将选择任何类别为“紫色”的p元素，只要它们遵循img。

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

在这里看到js小提琴：http://jsfiddle.net/z59tq/3/

悬停一个项目应激活具有相同类别的所有项目

3 个答案: