css - 悬停效果多个子元素

Question

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

感谢您的帮助!

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

Answer 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