html - 如何在悬停时影响所有具有相同名称的类

Question

我正在尝试弄清楚如何影响具有相同类名的周围元素。我的具有相同类的元素在父 div 中并排堆叠，然后它们在另一个子 div 中继续。是否有可能在悬停时影响所有相同类的 div，以便悬停的元素具有不透明度:1 和其他 0.5？

我的选择器如下所示，但它只影响同一级别内的 div，并且只影响悬停元素之后的那些(我想影响所有这些):

icon:hover ~ .icon {
    opacity: 0.3;
}

为了更容易演示:Fiddle

任何建议表示赞赏，:)

Answer 1

问题是主容器有子容器。您可以使用 CSS 做的最接近的事情是这样的:

.main:hover > .icon {
    opacity: 0.3;
}

.main:hover .icon:hover {
    opacity: 1;
}

参见此处:http://jsfiddle.net/k2gXJ/3/ (第二行失败)

但是，只要稍微修改一下结构，您就可以实现您想要的效果。看这里:

http://jsfiddle.net/k2gXJ/4/ (这将容器作为具有相同类名的 sibling (您可以为此创建一个类)，当然不确定您的应用程序是否可以做到这一点)

---

更新

图标已分组的新示例，因此段落不会影响任何内容:http://jsfiddle.net/k2gXJ/5/