Question

当我hover相邻元素时，我正在尝试应用CSS。我的CSS看起来像这样：

.class1:hover + .class2 {}

这应该是一个菜单。当我悬停.menuNormal时，.mnuExtended应该可见。这是我的HTML / CSS：

<style>
.menuNormal {width:100px; height:100px; background-color:FFF}
.menuExtended {width:100px; height:100px; background-color:green; display:none;}
.menuNormal:hover + .menuExtended{display:block;}
</style>

<body>
<div class="menuNormal">
<p>hover to unfold extra menu</p>
</div>

<div class="menuExtended">
<p>here are some menu buttons</p>
</div>
</body>

我正在尝试将.menuExtended从display:none更改为display:block，但似乎无效。我在做什么问题？

Answer 1

而不是.menublokcontainer:hover + div.menuExtention写下如下所示

.menublokcontainer > div:hover .menuExtention {
width: 135px;
height: 121px;
display: block;
}

Answer 2

你可以使用jQuery来做到这一点：

$('.menuNormal').hover(function(){
    $('.menuExtended').css({'display':'block'});
});

使用CSS悬停相邻元素时，对元素应用更改

2 个答案: