Question

我想用div创建一个简单的下拉菜单，但我有这个问题：当我的按钮div显示相当不错，但当鼠标从我的链接字段（在这种情况下显示/隐藏文本）出去时，我的div去隐藏。如何更改隐藏区域按钮？因为在我的文件中我无法选择下拉列表中的链接。

HTML code：

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

});

Answer 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'。

Answer 2

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

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

最后，我不确定你想将滑动div的高度设置得比图像（80px）小（60px）？

jsFiddle此处

显示，用鼠标悬停，鼠标悬停隐藏DIV

2 个答案: