[英]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.