Question

我们有这个问题

在这里，您可以看到菜单的基本结构

当您使用鼠标指针快速跟踪箭头时（从标题到底部交叉菜单），您立即看到子菜单。

我试图使用属性转换持续时间ma来阻止此操作（0.7秒）不起作用。实际上，当鼠标指针从按钮gender1转到gender2时，我会延迟子菜单的外观，这样当你快速移动鼠标交叉菜单时，你看不到子菜单。

感谢所有人，我的英语非常糟糕，抱歉！

我的HTML

<p style="margin-left:50px">FOLLOW THE ARROW <BR /><BR /> &darr;</p>

<ul class='dd_menu'>
<li><a href='#nogo'>Gender 1</a>
    <div id="pluto">
    <a href='#nogo1'>Male</a><br />
    <a href='#nogo2'>Female</a>
    </div>
</li>
<li><a href='#nogo'>Gender 2</a>
    <div id="pluto">
    <a href='#nogo1'>Male</a><br />
    <a href='#nogo2'>Female</a>
    </div>
</li>

</ul>
----

我的css

.dd_menu { padding:0px; margin:0; list-style-type:none; height:30px; width:500px; margin:55px 0 0 55px; border:#CCC 1px dashed}
.dd_menu li {float:left; height:30px; border-right: solid 1px white; width:95px; }
.dd_menu li a {display:block;  height:28px;  padding:3px 5px 3px 5px;}

.dd_menu li:hover {position:relative; background-color:#DDD;  }

#pluto  {border:#CCC 1px solid; width:100px; display:none;}

.dd_menu li:hover #pluto { display:inline; width:95px; display:block;  -webkit-transition-duration: 1s;
    transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s; }

Answer 1

这是一篇关于css3下拉菜单，过渡效果，过渡时间e.t.c的精彩文章。还有一节正确使用过渡延迟。检查它会很棒：http://www.identifydesign.net/tutorials/css/pure-css-animated-dropdown-menu/ 您需要的信息位于添加时间标题下。

您也可以查看：关于过渡延迟的W3school文章： http://www.w3schools.com/cssref/css3_pr_transition-duration.asp

修改

可能是因为错误的顺序应该是这样的：

transition-duration: 0.7s; -moz-transition-duration: 0.7s; /* Firefox 4 */ -webkit-transition-duration: 0.7s; /* Safari and Chrome */ -o-transition-duration: 0.7s; /* Opera *

下拉菜单没有JS - 转换持续时间不起作用

1 个答案: