悬停效果多个子元素答案

【问题标题】：Hover Effect Multiple Child Elements悬停效果多个子元素
【发布时间】：2014-10-13 00:17:42
【问题描述】：

悬停在兄弟元素上时是否可以保持元素悬停效果？我创建了一个 jfiddle 来演示。我试图保持.child-menu-img 100% 的不透明度，同时将鼠标悬停在 H3 文本上。我发现当悬停在.child-menu div 上时，我可以使用.child-menu-item:hover>h3 影响 h3，但我找不到在悬停在 h3 上时保持悬停效果的方法。希望这是有道理的！我想知道这是否需要 jQuery，但到目前为止，我的搜索还没有找到任何解决方案（javascript 或纯 CSS）。或者，也许我需要修改我的标记才能使其正常工作。我迷路了！

感谢您的帮助！

http://jsfiddle.net/inhouse/rfexypLz/

【问题讨论】：

这是你想要的吗？ jsfiddle.net/koala_dev/rfexypLz/9
@koala_dev 这正是我想要的！万分感谢！缺少的 CSS 是 .child-menu-item:hover a>img
没问题，但请记住，这是一个问答风格的网站，因此最好添加答案，而不是使用解决方案更新问题。我在下面添加了我的，请考虑将其标记为已接受，以便让社区知道您的问题现已解决。

标签： css hover effect

【解决方案1】：

似乎您需要使用 .child-menu-item:hover 作为所有悬停状态样式的基础：

.child-menu-item:hover a>img {
    opacity: 1;
    filter:alpha(opacity=100);
}
.child-menu-item:hover>h3 {
    background:white;
}
.child-menu-item:hover h3 a {
    opacity: 1;
    filter: alpha(opacity=100);
    text-decoration: none;
}

Updated fiddle

【讨论】：