Question

我使用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; 
}

EDIT2：
我所知道的只是这个元素有类myclass。我不知道元素名称或类别是什么。

感谢。

Answer 1

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

＆＃13;

$('.myclass').mouseover(function(e) {
  var elm = document.elementFromPoint(e.pageX, e.pageY);
  $(elm).addClass('hovered');
}).mouseout(function() {
  $(this).removeClass('hovered');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你所得到的只是因为事件冒泡，每当在子元素中触发事件时，它就会被淹没到顶层。尝试添加return false;，如下所示，

＆＃13;

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

＆＃13;

.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;	
}

＆＃13;

<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>

＆＃13;

Answer 3

您只需使用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 4

您在子元素上有一个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悬停效果）的示例：

＆＃13;

$(".myclass").filter(function() {
  return $(this).parents(".myclass").length > 0;
}).addClass("child");

＆＃13;

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

＆＃13;

<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>

＆＃13;

以下是使用hovered类的示例：

＆＃13;

$(".myclass").filter(function() {
  return $(this).parents(".myclass").length > 0;
}).hover(
  function() { $(this).addClass("hovered"); },
  function() { $(this).removeClass("hovered"); }
);

＆＃13;

.hovered {
  border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

Answer 5

以下是mouseover-part的解决方案：

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

现在只需将“匹配”更改为您喜欢的任何内容（父/子）;）。

Answer 6

你可以使用

$("div > p"）所有p元素都是div元素的直接子元素

或

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

All div elements that have a p element

根据您的需要定制。我希望你被排除了

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

6 个答案: