繁体   English   中英

当它们具有相同的类名时,如何检测鼠标现在位于子元素而不是其父元素上

[英]How to detect mouse is now over child element and not its parent , when they have same class names

我使用jquery查找当前悬停的元素。 我的HTML是这样的:

<div class="parent myclass">
    parent
    <div class="child myclass">
        child
    </div>    
</div>

现在我想在类myclass当前悬停的元素上插入边框。
但是,当鼠标悬停在子元素上方时, jquery不会检测到鼠标不在父元素上方。

也许以前有人问过,但我不知道如何搜索。 这是一个小提琴:
http://jsfiddle.net/uxa38xjz/1/

我如何更改该代码,因此如果鼠标悬停在子元素上,则只有子元素会收到.hovered类。 当前,当鼠标悬停在子脚本上时,不会将.hovered从父脚本中删除。

编辑:

这是我的脚本:

$('.myclass').mouseover( 
function(){ 
    $(this).addClass('hovered');
} )
.mouseout(
    function(){
    $(this).removeClass('hovered');
});

这是css

.parent{
width: 100px;
height:100px;
display:block;
background-color:#eee;
margin:80px;
}

.child{
width: 70px;
height:70px;
display:block;
background-color:#00f;
}

.hovered{
-webkit-box-shadow: inset 0px 0px 0px 2px #f00;
-moz-box-shadow: inset 0px 0px 0px 2px #f00;
box-shadow: inset 0px 0px 0px 2px #f00; 
}

编辑2:
我唯一知道的是此元素具有类myclass 而且我不知道什么是元素名称或它们具有什么类。

谢谢。

您可以使用document.elementFromPoint方法在鼠标位置找到特定元素,如下所示:

 $('.myclass').mouseover(function(e) { var elm = document.elementFromPoint(e.pageX, e.pageY); $(elm).addClass('hovered'); }).mouseout(function() { $(this).removeClass('hovered'); }); 
 .parent { width: 100px; height: 100px; display: block; background-color: #eee; margin: 80px; } .child { width: 70px; height: 70px; display: block; background-color: #00f; } .hovered { -webkit-box-shadow: inset 0px 0px 0px 2px #f00; -moz-box-shadow: inset 0px 0px 0px 2px #f00; box-shadow: inset 0px 0px 0px 2px #f00; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent myclass">parent <div class="child myclass">child</div> </div> 

您得到的只是由于事件冒泡,每当在子元素中触发事件时,该事件就会被存储到顶层。 尝试添加return false; 像下面一样

 $('.myclass').mouseover( function(){ $(this).addClass('hovered'); return false; } ) .mouseout( function(){ $(this).removeClass('hovered'); }); 
 .parent{ width: 100px; height:100px; display:block; background-color:#eee; margin:80px; } .child{ width: 70px; height:70px; display:block; background-color:#00f; } .hovered{ -webkit-box-shadow: inset 0px 0px 0px 2px #f00; -moz-box-shadow: inset 0px 0px 0px 2px #f00; box-shadow: inset 0px 0px 0px 2px #f00; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="parent myclass"> parent <div class="child myclass"> child </div> </div> 

您可以简单地使用is(':hover')方法来实现这一点:

 $('.myclass').mouseover( function(){ if($('.child').is(":hover")) { $('.parent').removeClass('hovered'); $('.child').addClass('hovered'); } else { $(this).addClass('hovered'); } } ) .mouseout( function(){ $(this).removeClass('hovered'); }); 
 .parent{ width: 100px; height:100px; display:block; background-color:#eee; margin:80px; } .child{ width: 70px; height:70px; display:block; background-color:#00f; } .hovered{ -webkit-box-shadow: inset 0px 0px 0px 2px #f00; -moz-box-shadow: inset 0px 0px 0px 2px #f00; box-shadow: inset 0px 0px 0px 2px #f00; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="parent myclass"> parent <div class="child myclass"> child </div> </div> 

小提琴

您在子元素上有一个child类,因此纯CSS解决方案是:

.child.myclass:hover {
  border: 1px solid black;
}

...或添加一个hovered类,但是对于现代浏览器(甚至IE8),您实际上并不需要它:

$(".child.myclass").hover(
    function() { $(this).addClass("hovered"); },
    function() { $(this).removeClass("hovered"); }
});

如果该child类确实不存在(您只是添加它以澄清您的问题),则可以在编写HTML时添加它,或者在不可避免的情况下,在页面加载时通过JavaScript添加它。 无论哪种方式,我都会使用CSS来实现实际的悬停效果。

这是通过JavaScript(和CSS悬停效果)添加该类的示例:

 $(".myclass").filter(function() { return $(this).parents(".myclass").length > 0; }).addClass("child"); 
 .child.myclass:hover { border: 1px solid black; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="myclass"> parent <div class="myclass"> child </div> </div> 

这是一个使用hovered类的示例:

 $(".myclass").filter(function() { return $(this).parents(".myclass").length > 0; }).hover( function() { $(this).addClass("hovered"); }, function() { $(this).removeClass("hovered"); } ); 
 .hovered { border: 1px solid black; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="myclass"> parent <div class="myclass"> child </div> </div> 

这是mouseover-part的解决方案:

function(events){ 
      var that=$(events.currentTarget);
      if(that.attr('class').match('child')){
         $(this).addClass('hovered');
      }
})

现在,只需将“匹配项”更改为您喜欢的任何内容即可(父母/孩子);)。

您可以使用

$("div > p" )是div元素的直接子元素的所有p个元素

要么

:has(selector)  $("div:has(p)") 

All div elements that have a p element

根据您的需要进行定制。 我希望你被送走了

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM