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

【问题标题】：Hovering one item should activate all item with the same class悬停一个项目应该激活所有具有相同类别的项目
【发布时间】：2014-03-24 15:29:08
【问题描述】：

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

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

【问题讨论】：

使用css伪类:hover
@Sai 不，这不起作用，因为 :hover 仅在您将鼠标悬停在父元素上时才起作用。他正在尝试将 :hover 用于同行和非家庭元素。你不能只用 CSS 来做到这一点......但你可以用 jQuery
没有javascript，我想不出办法来做到这一点。您可以添加 CSS 来定义项目在悬停时的外观。您需要一种脚本语言才能真正在用户未与之交互的项目上产生悬停效果。
@Sai 但是如何... .purple:hover 只让悬停的项目生效。但不是另一个 - 这就是我想要做的......悬停一个项目并全部获得效果
哦，我真的很抱歉我没有看到你提到所有紫色类的选择器。单独使用 CSS 是无法做到的。

标签： html css class hover

【解决方案1】：

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

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

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

});

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

【讨论】：

【解决方案2】：

只有 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】：

如果没有 javascript，您可以使用 通用同级组合选择器 实现的最接近的事情是这样的：http://jsfiddle.net/6gEC8/

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

问题是只有p's 后悬停的元素才能得到效果...

【讨论】：

根据您的要求，这是您在不使用 javascript 的情况下最接近的...
@user3342174 如果它回答了你的问题，请检查一下