Question

我试图在悬停在li上时显示div（div有一些项目但不是标准高度）。但我无法做到。

<li>
<a class="testli" id="testli">testli</a>
</li>

<div class="menu" id="menu">
some text
</div>

$(document).ready(function(){
$( "#testli" ).hover(function() {
        $("#menu").toggleClass( "menu_show" );
});
}); 

.menu {
background:#fff;
color:#000;
position:absolute;
width:100%;
height:0;
color:#000;
z-index:999;
overflow:hidden;
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}

.menu_show {    
height:auto;
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}

有没有办法用转换显示带有jquery（淡出）的div？我试图把高度：自动;但它没有转变

Answer 1

首先，改变

$( "#testli" ).click(function() {
...

使用：

$( "#testli" ).hover(function() {
...

然后，从CSS中删除

height:0;

因为您无法悬停高度为0像素的区域。相反，您应该设置初始和最终高度，以使转换正常工作。见this example

菜单<li>在悬停显示div上进行过渡</li>

1 个答案: