我是CSS，html5和jquery的新手。我正在尝试构建一个菜单，其中悬停时出现和消失的列表项。正如mplungjan所问，代码在这里：http : //jsfiddle.net/m5ab6/
HTML是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
rel="stylesheet"
href="drop.css"
>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
</head>
<body>
<nav class="main">
<ul id="topbar">
<li class="droplist">Fruits
<ul class="subdrop">
<li>Apple</li>
</ul>
</li>
<li class="droplist">Vegetables
<ul class="subdrop"></ul>
</li>
</ul>
</nav>
</body>
<!-- <script src="drop.js"></script> -->
</html>
CSS是：-
@CHARSET "UTF-8";
.main{
width: device-width;
height:200px;
}
#topbar
{
background-color: black;
color: grey;
/*display: none;*/
list-style-type: none;
}
.droplist
{
display: inline;
padding: 20px;
position: relative;
}
.subdrop{
display:none;
}
Javascript是：-
function hoverinfunc(){
$(".subdrop").show(500);
//$("subdrop").css({"position:"})
}
function hoveroutfunc(){
$(".subdrop").hide(500);
}
$(document).ready(
$("li.droplist").hover(hoverinfunc, hoveroutfunc)
);
问题：从水果/蔬菜悬停会改变蔬菜的布局。通常，蔬菜位于水果的右侧。但是，不断在水果/蔬菜中进出盘旋会导致蔬菜进入水果之下。我的要求是，蔬菜的位置应始终在水果的右边
我的解决方案（可能是一个天真的）：我想补充float:left;的.droplist'CSS文件。但是，因此，背景色丢失了。
请帮助我了解我错了。
function hoverinfunc() {
$(".subdrop", this).stop().show(100);
}
function hoveroutfunc() {
$(".subdrop", this).stop().hide(300);
}
$(function(){ // DOM ready shorthand
$("li.droplist").hover(hoverinfunc, hoveroutfunc);
});
CSS：
.main {
width: 100%;
height:200px;
}
#topbar {
background-color: black;
color: grey;
list-style: none;
}
.droplist {
position: relative;
display: inline-block; /*for padding to work*/
padding: 20px;
}
.subdrop {
position:absolute;
left:0; /* to properly align on the parent LI left */
background:black;
display:none;
padding:20px;
white-space:nowrap; /*for text to overflow parent LI size*/
}
制作JS的另一种简单而不错的方法是：jsFiddle示例
$("li.droplist").hover(function(){
$("> ul", this).stop().slideToggle(280);
});
如果您想根据事件类型来不同地控制动画速度，这很容易：将事件参数（.hover()方法侦听mouseenterand mouseleave）传递给条件运算符（?:），例如：
$("li.droplist").hover(function( e ){
$("> ul", this).stop().slideToggle(e.type=='mouseenter'?100:300);
});
是mouseenter？（TRUE）设置100ms动画：（ELSE [is mouseleave]）设置300ms动画
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句