Question

将鼠标悬停在同级元素上时是否可以保持元素悬停效果？我创建了一个jfiddle来演示。我试图保持.child-menu-img 100％的不透明度，同时将鼠标悬停在H3文本上。我发现当悬停在.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

悬停效果多个子元素

1 个答案: