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

回答

相關問題