我想显示一个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