鼠标移在图片显示div， 离开时 如果鼠标在显示的div上时就不隐藏，反之隐藏！（jquery 实现）谢了！！！ 10
5个回答
展开全部
$("#img id").hover(
//鼠标移在图片显示div
function () {
$("#div id").show();
},
//鼠标离开图片时触发
function () {
$("#div id").hover(
//鼠标在层上时，不改变
function () {
},
//鼠标里开层时，隐藏层
function () {
$("#div id").hide();
});
}
);
//鼠标在离开图片后，仍在层上，之后离开层
$("#div id").hover(
//鼠标仍在div上，不改变
function () {
},
//鼠标离开div 时，隐藏div
function () {
$("#div id").hide();
});
//鼠标移在图片显示div
function () {
$("#div id").show();
},
//鼠标离开图片时触发
function () {
$("#div id").hover(
//鼠标在层上时，不改变
function () {
},
//鼠标里开层时，隐藏层
function () {
$("#div id").hide();
});
}
);
//鼠标在离开图片后，仍在层上，之后离开层
$("#div id").hover(
//鼠标仍在div上，不改变
function () {
},
//鼠标离开div 时，隐藏div
function () {
$("#div id").hide();
});
更多追问追答
追问
这样如果 鼠标不移到div上的话 他还是不会隐藏啊？
追答
鼠标没移到div上时，如果在图片上就不会隐藏撒，如果鼠标离开了图片，但时在div上时，还是会显示层，只有当鼠标离开图片并且不在div上时才会隐藏啊
//这段代码鼠标在img上时，显示层，离开后判断鼠标是不是在div上，如果在div上就不改变，如果离开就隐藏div
$("#img id").hover(
//鼠标移在图片显示div
function () {
$("#div id").show();
},
//鼠标离开图片时触发
function () {
$("#div id").hover(
//鼠标在层上时，不改变
function () {
},
//鼠标里开层时，隐藏层
function () {
$("#div id").hide();
});
}
);
//这段表示鼠标已经离开了img后并且鼠标在div上，之后鼠标离开div就隐藏div
$("#div id").hover(
//鼠标仍在div上，不改变
function () {
},
//鼠标离开div 时，隐藏div
function () {
$("#div id").hide();
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一个可能的方法就是做两张图片，一张是灰蒙蒙的，一张是原来的，比如原来那张是 1.jpg, 另外一张处理过的是 2.jpg，HTML代码如下
<img src="1.jpg" onMouseOver="this.src='2.jpg'" onMouseOut="this.src='1.jpg'">
<img src="1.jpg" onMouseOver="this.src='2.jpg'" onMouseOut="this.src='1.jpg'">
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
*{ margin:0; padding:0;}
.container{ border:2px solid #666; width:321px; margin:50px;}
.img_nav{ border-bottom:1px solid #666; position:relative; z-index:2;}
.content{ display:none; position:relative; z-index:1;}
</style>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script>
$(function(){
$(".img_nav,.content").mouseover(function(){
$(".content").show();
});
$(".img_nav,.content").mouseout(function(){
$(".content").hide();
});
})
</script>
</head>
<body>
<div class="container">
<p class="img_nav">这里用p代替图片</p>
<div class="content">
<p>dfdfdfdf</p>
<p>dfdfdfdf</p>
<p>dfdfdfdf</p>
<p>dfdfdfdf</p>
</div>
</div>
</body>
</html>
*{ margin:0; padding:0;}
.container{ border:2px solid #666; width:321px; margin:50px;}
.img_nav{ border-bottom:1px solid #666; position:relative; z-index:2;}
.content{ display:none; position:relative; z-index:1;}
</style>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script>
$(function(){
$(".img_nav,.content").mouseover(function(){
$(".content").show();
});
$(".img_nav,.content").mouseout(function(){
$(".content").hide();
});
})
</script>
</head>
<body>
<div class="container">
<p class="img_nav">这里用p代替图片</p>
<div class="content">
<p>dfdfdfdf</p>
<p>dfdfdfdf</p>
<p>dfdfdfdf</p>
<p>dfdfdfdf</p>
</div>
</div>
</body>
</html>
追问
你没明白我的意思 可以看下一楼
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(document).ready(function(){
$("#div").hover(
function () {
$("#div2").css("display","inline");
},
function () {
$("#div2").css("display","");
}
);
)}
<div id=div1>1111111111111111</div>
<div id=div2 style="display:none">222222222222</div>
$("#div").hover(
function () {
$("#div2").css("display","inline");
},
function () {
$("#div2").css("display","");
}
);
)}
<div id=div1>1111111111111111</div>
<div id=div2 style="display:none">222222222222</div>
追问
你没理解我的意思啊
追答
已经修改,完美实现. 自己替换引用jquery.js文件.
无标题文档
$(document).ready(function(){
$("#div1,#div2").hover(
function () {
$("#div2").css("display","inline");
},
function () {
$("#div2").css("display","none");
}
);
})
1111111111111111
222222222222
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js就能轻松实现啊
追问
请教！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
