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

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/（这会将容器视为具有相同类名的兄弟姐妹（您可以为此创建一个类），当然不确定您的应用是否可以执行此操作）

---

更新

图标分组的新示例，以便该段落不会影响任何内容：http://jsfiddle.net/k2gXJ/5/