使用jquery显示子元素的悬停元素

Question

我有三个按钮。在悬停时，我使用jQuery计算鼠标的x轴和y轴，并显示悬停元素的边框。对于单个元素，悬停工作正常。但对于子元素，只有父元素显示边框。用于样本的代码。

＆＃13;

＆＃13;

$(document).ready(function(){
    $(document).mousemove(function(event){
         $(".button").removeClass('active')
    		$('.button').each(function(){
        var position = $(this).position();
        var width = $(this).width()
        var height = $(this).height()
       	var x1 = position.left 
     	  var y1 = position.top
        var x2 = x1+width
        var y2 = y1+height
        
        if (event.pageX > x1 && event.pageX < x2 && event.pageY > y1 && event.pageY < y2){
        	 $("span").text(event.pageX + ", " + event.pageY);
           $(this).addClass('active')
        }
        });

    });
});

＆＃13;

.button{
  width:150px;
  height:35px;
  display:block;
  position:absolute;
  pointer-events: none;
  border:1px solid transparent;
}

.button.x{  top:10%;  left;35%;}
.button.y{top:40%;  left;35%;}
.button.z{top:20%;  left;35%;}
.button.active{
  border-color:blue;
  pointer-events: auto;
  border:1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button x">
 Hello
 <div class="button y">
 Hello
  </div>
</div>

<div class="button z">
 Hello
</div>

<span></span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个常见错误，部分原因在于所涉及的jQuery方法的命名（恕我直言）。您正在使用position（＆＃34;获取当前坐标...相对于偏移父级。＆＃34; ）想要使用offset（＆＃34;获取当前坐标...相对于文档。＆＃34; ）：

var position = $(this).offset();

更新示例（最简单的看一下你是否点击了整页链接）（我还为嵌套元素添加了背景并调整了添加的边框，以便在鼠标悬停时更清晰）：

＆＃13;

＆＃13;

$(document).ready(function(){
    $(document).mousemove(function(event){
         $(".button").removeClass('active')
    		$('.button').each(function(){
        var position = $(this).offset();
        var width = $(this).width()
        var height = $(this).height()
       	var x1 = position.left 
     	  var y1 = position.top
        var x2 = x1+width
        var y2 = y1+height
        
        if (event.pageX > x1 && event.pageX < x2 && event.pageY > y1 && event.pageY < y2){
        	 $("span").text(event.pageX + ", " + event.pageY);
           $(this).addClass('active')
        }
        });

    });
});

＆＃13;

.button{
  width:150px;
  height:35px;
  display:block;
  position:absolute;
  pointer-events: none;
  border:1px solid transparent;
}

.button.x{  top:10%;  left;35%;}
.button.y{top:40%;  left;35%;}
.button.z{top:20%;  left;35%;}
.button.active{
  pointer-events: auto;
  border:2px solid red;
}

.button.x {
  background-color: #00d;
}
.button.y {
  background-color: #0d0;
}

＆＃13;

<div class="button x">
 Hello
 <div class="button y">
 Hello
  </div>
</div>

<div class="button z">
 Hello
</div>

<span></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

＆＃13;

＆＃13;

＆＃13;

或者使用CSS：

.button:hover {
  border-color:blue;
  pointer-events: auto;
  border:1px solid;
}

（并从pointer-events: none;移除.button。）

实时示例（具有相同的可见性调整）：

＆＃13;

＆＃13;

.button{
  width:150px;
  height:35px;
  display:block;
  position:absolute;
  /*pointer-events: none;*/
  border:1px solid transparent;
}

.button.x{  top:10%;  left;35%;}
.button.y{top:40%;  left;35%;}
.button.z{top:20%;  left;35%;}
.button:hover {
  pointer-events: auto;
  border:2px solid red;
}

.button.x {
  background-color: #00d;
}
.button.y {
  background-color: #0d0;
}

＆＃13;

<div class="button x">
 Hello
 <div class="button y">
 Hello
  </div>
</div>

<div class="button z">
 Hello
</div>

<span></span>

＆＃13;

＆＃13;

＆＃13;