[英]Only execute hover() when NOT hovering over certain element
there's this problem I'm having, while coding a little table with an hover-effect, causing it to change rows. 我遇到了这个问题,同时在编码带有悬浮效果的小表时导致其更改行。 However, in the original , I also want to use links.
但是,在原始语言中,我也想使用链接。 When the user hovers over those links, I don't want the hover-effect to take place.
当用户将鼠标悬停在那些链接上时,我不希望发生悬停效果。
Relevant code, in which popup
is the row's class (hovering over that activates hoverIntent to change those rows into the other ones). 相关代码,其中
popup
是该行的类(将鼠标悬停在该代码上会激活hoverIntent将这些行更改为其他行)。 The to be excluded span
with a link within has a class named linky
.: 要排除的
span
其中包含链接)具有名为linky
的类:
<script type="text/javascript">
$(document).ready(function(){
$(".popup").hoverIntent( hover, original );
});
function hover(){
$(this).addClass("hovering");
$(".hovering .original").fadeOut(50, function() {
$(".hovering .hover").fadeIn(300);
});
}
function original(){
$(".hovering .hover").fadeOut(50, function() {
$(".hovering .original").fadeIn(300);
$(".popup").removeClass("hovering");
});
}
</script>
<table>
<tr class='header'>
<th>row</th>
<th>row</th>
<th>row</th>
<th>row (the ones below are just a javascript fix, because it otherwise changes position on hover, when using this system. They are not visible.)</th>
<th>row</th>
<th>row</th>
</tr>
<tr class='popup'>
<td class='original'>First column</td>
<td class='original'><span class='linky'><a>mylink</a></span><!-- this span should be excluded --></td>
<td class='original'>Third column</td>
<td class='hover' style='display:none;'>this one gets displayed when hovering 1</td>
<td class='hover' style='display:none;'>this one gets displayed when hovering 2</td>
<td class='hover' style='display:none;'>this one gets displayed when hovering 3</td>
</tr>
</table>
I'm sorry if I forgot something, but had to rewrite it all, because it is embedded in PHP-script. 很抱歉,如果我忘记了什么,但不得不全部重写,因为它嵌入在PHP脚本中。
Best regards, Aart 最好的问候,阿特
Something like this should work 这样的事情应该工作
var linkIsHovered = false;
$(document).ready(function(){
$(".popup").hoverIntent( hover, original )
.delegate("a", "mouseover", flagLinkHover)
.delegate("a", "mouseout", flagLinkUnHover);
});
function flagLinkHover() {
linkIsHovered = true;
}
function flagLinkUnHover() {
linkIsHovered = false;
}
function hover(){
if (linkIsHovered) {return}
$(this).addClass("hovering");
$(".hovering .original").fadeOut(50, function() {
$(".hovering .hover").fadeIn(300);
});
}
function original(){
if (linkIsHovered) {return}
$(".hovering .hover").fadeOut(50, function() {
$(".hovering .original").fadeIn(300);
$(".popup").removeClass("hovering");
});
}
If you weren't using hoverIntent the above probably wouldn't work as you'd have to unqueue and undo partially completed animations, but with hoverIntent it'll probably be enough to use the above approach. 如果您没有使用hoverIntent,那么上面的方法可能就行不通了,因为您必须取消排队并撤消部分完成的动画,但是使用hoverIntent可能足以使用上述方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.