显示，隐藏 DIV 鼠标悬停，鼠标悬停答案

【问题标题】：show,hide DIV with mouseover , mouseout显示，隐藏 DIV 鼠标悬停，鼠标悬停
【发布时间】：2012-10-31 14:42:03
【问题描述】：

我想用 div 创建一个简单的下拉菜单，但我遇到了这个问题：当我的按钮 div 显示非常好，但是当鼠标从我的链接字段（在这种情况下显示/隐藏文本）中消失时，我的 div 会隐藏。如何更改我的隐藏区域按钮？因为在我的文件中，我无法在下拉 div 中选择链接。

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();
});

});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您需要将链接和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，将其绑定到类 'wrapper'。

【讨论】：

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

【解决方案2】：

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

您还可以将 mouseover / mouseout 配对替换为 hover

最后，我不确定您是否要将滑动 div 的高度（60px）设置为小于图像（80px）？

jsFiddle这里

【讨论】：