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

Question

我使用 jquery 来查找当前悬停的元素。我的 html 是这样的：

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

现在我想在当前悬停的元素上插入边框 class myclass .
但是当鼠标在子元素上时 jquery 没有检测到鼠标不在父元素上。

可能之前有人问过，但我不知道如何搜索。这是 fiddle :
http://jsfiddle.net/uxa38xjz/1/

我如何更改该代码，以便如果鼠标悬停在子元素上，则只有子元素接收 class .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; 
}

edit2:
我唯一知道的是这个元素有 class myclass。我不知道元素名称是什么，也不知道它们有什么 classes。

谢谢。

Answer 1

您在子元素上有 child class，因此纯 CSS 解决方案是：

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

...或添加一个 hovered class，但现代浏览器（甚至 IE8）确实不需要它：

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

如果 child class 不存在（您添加它只是为了澄清您的问题），我会在写 HTML 或，如果不可避免，请在页面加载时通过 JavaScript 添加它。无论哪种方式，我都会使用 CSS 来实现实际的悬停效果。

这是通过 JavaScript 添加 class 的示例（以及 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 class 的示例：

$(".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>

Answer 2

您可以使用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>

Answer 3

鼠标悬停部分的解决方法如下：

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

现在只需将 "match" 更改为您喜欢的任何内容 (parent/child) ;)。

Answer 4

所有你得到的都是因为事件冒泡，每当在子元素中触发一个事件时，它就会被传递到顶层。尝试添加 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>

Answer 5

您可以简单地使用 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>

FIDDLE

Answer 6

你可以使用

$("div > p") div 元素

的直接子元素的所有 p 元素

或

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

All div elements that have a p element

根据您的需要进行定制。我希望你已经被路由

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

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

javascript

jquery