87,915
社区成员
发帖
与我相关
我的任务
分享判断鼠标是否落在指定元素上
点击图片在图片下方动态显示一个div。然后当我的div离开图片时（删除这个隐藏的div前 先判断鼠标没有落在显示出来的div上，如果有就不删除显示出来的div ，如果没有就直接删除显示出来的div）。
现在面临的问题是：
/*这段是鼠标放到图片上 显示div ，否则就不显示 */
$("#aa"+id).hover( function() {
$("#mm"+id).show();
}, function() {
/*我想在这里先判断鼠标没有落在显示出来的div上，
*如果有就不删除显示出来的div ，如果没有就直接删除显示出来的div */
// $("#mm"+id).hide();
});
$("#mm"+id).hover( function() {
$("#mm"+id).show();
}, function() {
$("#mm"+id).remove();
});
有哪位大侠 能帮忙解决的 定当奖赏。（要兼容IE、火狐、谷歌浏览器的）谢谢了。
现在面临的问题是：
/*这段是鼠标放到图片上 显示div ，否则就不显示 */
$("#aa"+id).hover( function() {
$("#mm"+id).show();
}, function() {
/*我想在这里先判断鼠标没有落在显示出来的div上，
*如果有就不删除显示出来的div ，如果没有就直接删除显示出来的div */
// $("#mm"+id).hide();
});
$("#mm"+id).hover( function() {
$("#mm"+id).show();
}, function() {
$("#mm"+id).remove();
});
有哪位大侠 能帮忙解决的 定当奖赏。（要兼容IE、火狐、谷歌浏览器的）谢谢了。
...全文
请发表友善的回复…
发表回复
lziyanl 2013-11-04
- 打赏
- 举报
我觉这个真好，应用你写的这个代码却有个很奇怪的问题百思不得其解！
如下代码，当鼠标移到2 ul就隐藏了，移到1正常显示。
<ul class='t'>
<li>1</li>
<li>2</li>
</ul>
折腾了1个多小时，改css、html，硬是搞不定！ 后来将mouseover和mouserout 换为hover就可以了！
什么原因呢？
bree06 2012-10-13
- 打赏
- 举报
更新了一下代码，加入了多个图片的提示，加入了DIV阴影提示，DIV提示框显示在图片的正下方距3px的位置。不能用5楼的hover方法。因为用hover只要鼠标离开图片DIV就会自动隐藏，也就是说鼠标无法到达DIV区域，除非图片与DIV有一小部分重叠.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div{padding:3px;}
img{width:200px;height:140px;border:0px;float:left;}
#detail{position:absolute;width:200px;height:80px;display:none;}
.shadow {float:left;background:#000; margin:-5px -6px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.30');}
.frame {position:relative;background:#fff; padding:10px; display:block;
left:4px; top:4px;width:200px;height:80px;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<div id="showArea">
<img src="image/iphone3.jpg" alt="iphone3"></img>
<img src="image/iphone4.jpg" alt="ipPhone4"></img>
<img src="image/iphone4s.jpg" alt="iphone4s"></img>
<img src="image/iphone5.jpg" alt="iphone5"></img>
</div>
<div id="detail">
<div class="shadow"><div class="frame"></div></div>
<div>
<script language="javascript">
var speed = 200; // div显示速度
$('#showArea>img').bind('click', function(){
var detail = $('#detail'), _this = this;
// 图片未显示则显示，已显示则不操作
if (detail.css('display') == 'none') {
var _set = $(_this).offset();
// 设置DIV显示在图片正下方3px位置，可以根据实际情况改变位置.
detail.css({top: _set.top + Number($(_this).css('height').replace('px', '')) + 3, left:_set.left}).show(speed);
$('.shadow>.frame', detail).html('this\'s ' + $(_this).attr('alt'));
// 显示div并且给document绑定一个mouseover事件，监听鼠标移动事件。
$(document).bind('mouseover', function(e) {
var targ = e.target||e.srcElement; // Firefox,IE,Chrome
if (targ.nodeType == 3) targ = targ.parentNode // Safari
var set = detail.offset();
// 鼠标进入图片与div之间的间隙默认不隐藏，不然鼠标不能进入div区域。
var inArea = e.clientX > set.left
&& e.clientX < (set.left + Number(detail.css('width').replace('px', '')))
&& e.clientY < set.top;
// 鼠标在图片，div，图片与div之间的间隙时显示div，否则隐藏。
if (targ != _this && !inArea && targ.id != 'detail' && targ.className != 'shadow' && targ.className != 'frame') {
detail.hide(speed);
// 隐藏div并且取消document的mouseover监听。
$(document).unbind('mouseover');
}
});
}
else return false;
});
</script>
</body>
</html>lw5853103 2012-10-12
- 打赏
- 举报
2L已经写了不多说了
你用框架的话 兼容性都给你做好了 你直接可以用
正常的先判断浏览器类型然后添加mouseover/mouseout两个事件 不难的 仔细想想吧
你用框架的话 兼容性都给你做好了 你直接可以用
正常的先判断浏览器类型然后添加mouseover/mouseout两个事件 不难的 仔细想想吧
zhouhai3032 2012-10-11
- 打赏
- 举报
另一种实现思路（没有破坏你的结构）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div{padding:3px;}
img{width:200px;height:140px;border:0px;}
#detail{width:200px;height:100px;border:1px solid #ccc;display:none;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div >
<img src="w_meinv.jpg"></img>
<div id="detail">I'm an apple!</div>
</div>
<script language="javascript">
var detail = $('#detail');
$('img').hover(function(){
detail.show();
},function(){
detail.hide();
});
detail.hover(function(){
$(this).show();
}, function(){
$(this).hide();
});
</script>
</body>
</html>zhouhai3032 2012-10-11
- 打赏
- 举报
提供一个实现了相同效果的办法，也许帮不到你，仅供开阔思路:)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div{padding:3px;}
img{width:200px;height:140px;border:0px;}
#nav{width:115px;padding-top:115px;background: url(w_meinv.jpg) no-repeat;}
#detail{width:200px;height:100px;border:1px solid #ccc;display:none;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div >
<div id="nav">
<div id="detail">I'm an apple!</div>
</div>
</div>
<script language="javascript">
var detail = $('#detail');
$('#nav').hover(function(){
detail.show();
},function(){
detail.hide();
});
</script>
</body>
</html>
Go 旅城通票 2012-10-11
- 打赏
- 举报
$(function () {
$("#aa" + id).hover(function () {
$("#mm" + id).show().mouseover(function () { clearTimeout(window.timer); }).mouseout(function () { $(this).hide(); });
}, function (e) {
window.timer = setTimeout(function () { $("#mm" + id).hide(); }, 200); //延时隐藏，以便鼠标移动到div上时clear掉计时器
});
});
scscms太阳光 2012-10-11
- 打赏
- 举报
不结帖，不说话
bree06 2012-10-11
- 打赏
- 举报
写了一个简单的测试画面看看能不能有所帮助。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div{padding:3px;}
img{width:200px;height:140px;border:0px;}
#detail{width:200px;height:100px;border:1px solid #ccc;display:none;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div >
<img src="apple.jpeg"></img>
<div id="detail">I'm an apple!</div>
</div>
<script language="javascript">
var speed = 200; // div显示速度
$('img').bind('click', function(){
var detail = $('#detail'), _this = this;
// 图片未显示则显示，已显示则不操作
if (detail.css('display') == 'none') {
detail.show(speed);
// 显示div并且给document绑定一个mouseover事件，监听鼠标移动事件。
$(document).bind('mouseover', function(e) {
var targ = e.target;
if (targ.nodeType == 3) targ = targ.parentNode // Safari
var set = detail.offset();
// 鼠标进入图片与div之间的间隙默认不隐藏，不然鼠标不能进入div区域。
var inArea = e.clientX > set.left
&& e.clientX < (set.left + Number(detail.css('width').replace('px', '')))
&& e.clientY < set.top;
// 鼠标在图片，div，图片与div之间的间隙时显示div，否则隐藏。
if (targ != _this && !inArea && targ.id != 'detail') {
detail.hide(speed);
// 隐藏div并且取消document的mouseover监听。
$(document).unbind('mouseover');
}
});
}
else return false;
});
</script>
</body>
</html>
