我想顯示一個div時懸停在圖像上我發現了一個演示，我遵循，但它是一個切換懸停我想顯示div只有當鼠標懸停在它上一次，當鼠標再次隱藏走我不知道什麼是我需要的代碼更改爲工作像我想我在這裏的jQuery代碼jquery顯示和隱藏在懸停
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').hover(function() {
$(".slidingDiv").slideToggle();
});
});
變化：
$('.show_hide').hover(function() {
$(".slidingDiv").slideToggle();
});
到：
$('.show_hide').hover(function() {
$(".slidingDiv").slideDown();
}, function(){
$(".slidingDiv").slideUp();
});
的$ .hover功能是新接受第二個回調，被稱爲在鼠標離開時，您只需再次切換元素：
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').hover(function() {
$(".slidingDiv").slideDown();
}, function() {
$(".slidingDiv").slideUp();
}
);
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slidingDiv").hide();
$("#show_hide").show();
$('#show_hide').hover(function() {
$("#slidingDiv").slideDown();
}, function() {
$("#slidingDiv").slideUp();
});
});
</script>
</head>
<body>
<a id="show_hide">Show/Hide</a>
<div id="slidingDiv">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test
</div>
</body>
</html>
可以使用的MouseEnter和鼠標離開做到這一點
$('#ImgToHover').mouseEnter(function(){
// Action to perform to add hover
});
$('#ImgToHover').mouseLeave(function(){
// Action to perform to remove hover
});
$(document).ready(function() {
$("#div").mouseout(function(){
$("#div").hide();
}).mouseover(function(){
$("#div").show();
});
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0 /jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$("#b1").click(function(){
$("p").hide();
})
$("#b2").click(function(){
$("p").show();
})
$("#fade").click(function()
{
$("p").fadeOut(2000);
})
$("#fade1").click(function()
{
$("p").fadeIn(5000);
})
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.
If you click on me, I will disappear.
If you click on me, I will disappear.
If you click on me, I will disappear.
If you click on me, I will disappear.
If you click on me, I will disappear.
If you click on me, I will disappear.
If you click on me, I will disappear.
</p>
<input type="button" value="Hide" id="b1"/>
<input type="button" value="Show" id="b2"/>
<input type="button" value="Fade" id="fade"/>
<input type="button" value="Fade" id="fade1"/>
</body>
</html>
Replace Click() with hover().
使用'slideToggle'兩次是不可靠的，可能會導致一些不良結果 – Bloafer
不錯的提示，10倍。更改爲sludeDown/sludeUp –
你是什麼意思好提示，更像是我的好回答。請參閱下面我的未經編輯的答案。 – Bloafer