如何解决检查光标是否在元素jQuery的坐标中
|| 我有一张大图片,将鼠标悬停时会显示一系列按钮(例如\'在Facebook上共享\',\'画廊\',\'电子邮件\'等)。这些按钮存储为“ 0”,并在图像悬停时绝对定位。这是此标记:<a href=\"#\" title=\"Click for next image\" class=\"share_buttons\">
<img src=\"\" id=\"largeimage\" height=\"410\" width=\"600\" class=\"share_buttons\" />
</a>
<ul id=\"share_buttons\">
<li><a href=\"#\" title=\"Share on Facebook\" class=\"facebook\"><div class=\"icon\"></div>Facebook</a></li>
<li><a href=\"#\" title=\"Link to this Page\" class=\"link\"><div class=\"icon\"></div>Link</a></li>
<li><a href=\"#\" title=\"Contact this venue\" class=\"mail\"><div class=\"icon\"></div>E-mail</a></li>
<li>
<a href=\"#\" title=\"View the venue\'s Gallery\" rel=\"lightbox\" class=\"gallery\">
<div class=\"icon\"></div>
Gallery
</a>
</li>
</ul>
这是我为此编写的jQuery。如您所见,我包含了一个变量来确定用户的鼠标是否在共享按钮内,如果是,则不淡出它,但这似乎不起作用:
var inshared = false;
$(\'ul#share_buttons li a\').mouseover(function() { inshared = true; });
$(\'ul#share_buttons li a\').mouseout(function() { inshared = false; });
// When they hover a share image,fade in the share items:
$(\'a.share_buttons img\').mouseenter(function() {
var leftpos = ($(this).width() + $(this).offset().left) - $(\'ul#share_buttons\').outerWidth(true);
var toppos = $(this).offset().top + ($(\'ul#share_buttons\').outerHeight(true) * 0.3);
$(\'ul#share_buttons\').css({ left: leftpos,top: toppos });
$(\'ul#share_buttons\').fadeIn();
}).mouseleave(function() {
$(\'ul#share_buttons\').fadeOut();
});
不幸的是,由于ѭ0不是图像元素的后代,因此每当用户将鼠标置于按钮上时,图像上就会触发mouseout
事件,因此按钮会淡出。我的问题是,缺少检测光标位置是否在img
元素的坐标内,是否有办法防止此操作?
解决方法
您可以将图像放在div中,并且div可以同时托管ul和图像,并在div而不是图像上使用mouseover,这样就不会出现此问题
, 我将使用图像的尺寸创建一个div,将图像设置为背景图像,并将ul放置在该图像中...
<div style=\"width: 600px; height: 410px; background-image: url(...); \">
<ul id=\"share_buttons\">
<li><a href=\"#\" title=\"Share on Facebook\" class=\"facebook\"><div class=\"icon\"></div>Facebook</a></li>
<li><a href=\"#\" title=\"Link to this Page\" class=\"link\"><div class=\"icon\"></div>Link</a></li>
<li><a href=\"#\" title=\"Contact this venue\" class=\"mail\"><div class=\"icon\"></div>E-mail</a></li>
<li>
<a href=\"#\" title=\"View the venue\'s Gallery\" rel=\"lightbox\" class=\"gallery\">
<div class=\"icon\"></div>
Gallery
</a>
</li>
</ul>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。