show，hide DIV with mouseover，mouseout

我想用div创建一个简单的下拉菜单，但我有这个问题：当我的按钮div显示的不错，但是当鼠标从我的链接字段出去时（在这种情况下显示/隐藏文本）我的div去隐藏。我怎样才能改变我的隐藏区域按钮？，因为在我的文件中，我不能选择下拉div中的链接。show，hide DIV with mouseover，mouseout

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Papermashup.com | Sliding Div</title> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="dropdown/drop.js" type="text/javascript"></script> 
<link type="text/css" href="dropdown/drop.css" rel="stylesheet"/> 

</head> 

<body> 
<a href="#" class="show_hide">Show/hide</a><br /> 
    <div class="slidingDiv" style="width:103px;height:60px;"> 
     <img alt="" height="80" src="images/dropdown.png" width="103"> 
    </div> 
</body> 
</html>

CSS代码：

.show_hide { 
    display:none; 
}

JavaScript代码：

$(document).ready(function(){ 


    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

$('.show_hide').mouseover(function(){ 
    $(".slidingDiv").slideToggle(); 
}); 
$('.show_hide').mouseout(function(){ 
    $(".slidingDiv").slideToggle(); 
}); 

});

来源

2012-10-31 Mohamamdreza Siahpoosh

你需要用链接和DIV到同一容器中，然后将其绑定那里的事件。

<div class="wrapper"> 
    <a href="#" class="show_hide">Show/hide</a><br /> 
    <div class="slidingDiv" style="width:103px;height:60px;"> 
     <img alt="" height="80" src="images/dropdown.png" width="103"> 
    </div> 
</div>

然后，将事件绑定到show_hide，将其绑定到类'包装器'。

来源

2012-10-31 14:44:56 roacher

可你给我展示的这一个例子吗？因为当我这样做，我的下拉菜单进入疯狂的显示隐藏模式 –

如果是的话，那么你没有读过我发布的内容:) http://jsfiddle.net/RPdQW/2/ – roacher

谢谢你这么多roacher –

除了@ roacher的回答，您还需要通过设置宽度将包装div紧紧地裁剪到图像上。

你也可以更换mouseover/mouseout配对与hover

最后，我不知道你要设置的滑动div的高度更小（60像素）比图像（80px）？

jsFiddle这里

来源

2012-10-31 14:57:51 StuartLC

非常感谢你花花公子 –

show，hide DIV with mouseover，mouseout

回答

相关问题