0

当我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:noneto更改，display:block但它似乎不起作用。我做错了什么吗？

4

2 回答 2

1

而不是.menublokcontainer:hover + div.menuExtention像下面这样写

.menublokcontainer > div:hover .menuExtention {
width: 135px;
height: 121px;
display: block;
}
于 2013-05-27T07:59:33.200 回答
-1

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

$('.menuNormal').hover(function(){
    $('.menuExtended').css({'display':'block'});
});
于 2013-05-27T07:44:46.557 回答