调用css id选择器来更改另一个类

Question

我有这个菜单，其中带有css id选择器的选项卡隐藏或显示悬停时的div但我无法在css中调用它。 在这里，我插入一个示例来更好地解释我的问题：在悬停7,8和9出现。我如何改变：#seven:hover ~ .box

http://jsfiddle.net/a3y52/654/

感谢您的帮助！

Answer 1

你无法在CSS中实现这一点。相反，您可以使用div.menu元素来触发悬停，因为此元素与您想要影响的元素处于同一级别：

.menu:hover ~ .box {
    display: inline-block;
}

检查DEMO

ALTERNATIVE jQuery

$(document).on('mouseenter', '#seven', function() {
    $('.box').css({'display':'inline-block'});
}).on('mouseout', '#seven', function() {
    $('.box').removeAttr('style');
})