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

【问题标题】：Show the hovered element for a child element using jquery使用 jquery 显示子元素的悬停元素
【发布时间】：2025-12-27 08:00:06
【问题描述】：

例如，我有三个按钮。在每次悬停时，我使用 jQuery 计算鼠标的 x 和 y 轴，并显示悬停元素的边框。对于单个元素，悬停效果很好。但是对于子元素，只有父元素显示边框。用于示例的代码。

$(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')
        }
        });

    });
});

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

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

【问题讨论】：

你为什么要使用jQuery呢？ CSS 可以更轻松地做到这一点。
它是因为我有太多 div 的位置：absolute
@JinsonJohny：那有什么关系？ CSS 的 :hover 不在乎。
jsfiddle.net/pmcwswt4 example.. 只有外边框悬停有效
@JinsonJohny：因为你在 top 上有一个 div。但无论如何，如果你想用 JS 来做，下面的答案就涵盖了。 :-)

标签： javascript jquery html css

【解决方案1】：

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

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

更新示例（如果您点击整页链接，最容易查看）（我还为嵌套元素添加了背景，并调整了添加的边框，以便在鼠标悬停时更清晰）：

$(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')
        }
        });

    });
});

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

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

或者用 CSS 来做：

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

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

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

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

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

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

<span></span>

【讨论】：