使用 jQuery 将鼠标悬停在两个元素上答案

【问题标题】：Hover on two elements using jQuery使用 jQuery 将鼠标悬停在两个元素上
【发布时间】：2020-10-08 12:31:33
【问题描述】：

我有两个相互连接的<div> 元素，我的意思是它们之间没有空格。

<div id="box1">1</div>
<div id="box2">2</div>

我有这个 jQuery 代码：

$('#box1 , #box2').hover(function() {
  console.log("Hovered")
}, function() {
  console.log("Not")
});

我的问题是当我在 box1 和 box2 之间移动鼠标时，我仍然在控制台日志中显示“Not”。我希望将这些 div 视为一个元素，因此当我在它们之间移动鼠标时，我不会在控制台日志中显示“Not”。

提前致谢！

【问题讨论】：

请分享您的整个 html 文件结果
所以你想要非此即彼？
第二个参数用于鼠标移出事件，因此当您将鼠标移出任一元素时都会调用它。如果您希望将它们视为一个，请将它们放入同一个容器中并将事件放在该父元素上

标签： javascript html jquery hover

【解决方案1】：

我希望将这些 div 视为一个元素

嗯，很简单，他们不是。他们不可能。这不是 HTML 和 CSS 的工作方式。

对于绑定到事件处理程序的每个单独元素，都会触发一个悬停事件。每次您离开其中一个元素时，它都会按照您的说明打印“非”输出。

没有按照您描述的确切方式“解决”这个问题，但有其他方法。一个明显的解决方案是将它们都包装在一个外部 div 中，并将悬停事件绑定到该 div 上。那么整个区域将被视为一个元素（因为它确实是）。演示：

$('#boxcontainer').hover(function() {
  console.log("Hovered")
}, function() {
  console.log("Not")
});

#boxcontainer {
  border: solid 1px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxcontainer">
  <div id="box1">1</div>
  <div id="box2">2</div>
</div>

【讨论】：

我已经尝试过这个解决方案，但它对我不起作用，因为其中一个
是绝对显示的。
你的意思是这些盒子并不真正相邻，还是什么？和/或一些定位规则？您知道，如果您有这样的特定场景，并且您已经尝试过一些事情，那么您应该在问题中清楚地提及它，那么人们不会建议您尝试过或不适合您的情况的事情。你往往会得到你问的问题的答案，而不是你没有问的更复杂的问题。我们不是读心术者。询问时请始终提供minimal, reproducible example。谢谢。
我的错，它们之间没有间隙，包含这两个div的容器不认为绝对定位的div存在
请更新您的问题以包含所有相关细节，包括周围的 HTML 和所有对您的 div 有任何定位影响的相关 CSS 规则。这样它就可以像在您当前的真实页面中一样工作。然后我们有一些机会了解确切的情况并提出建议。（这就是minimal, reproducible example 所指的那种信息）。

【解决方案2】：

朋友检查下面的代码。我认为它会为你工作。因为你有 dai 你有一个绝对位置 div 你必须需要一个父 div 并且父 div 位置必须是相对的。为此，您只需添加一个简单的 CSS 代码 position: relative;。您还需要对 jquery 代码进行一些更改。您只需将鼠标悬停在父 div 上，它就会完成您的工作。希望这段代码对你有所帮助。

//Box 1 Demo
$('#boxParrent1').hover(function() {
  console.log("Hovered")
}, function() {
  console.log("Not")
});

//Box 2 Demo
$('#boxParrent2').hover(function() {
  console.log("Hovered")
}, function() {
  console.log("Not")
});

/*Main Code that are needed*/
#boxParrent1, #boxParrent2 {
    position: relative;
}




/*Codes Just used to give you a demo*/
#boxParrent1, #boxParrent2{
    display: flex;
    margin-bottom: 50px;
    border: 1px solid #000;
}
#boxParrent1{
    width: 200px;
}
#boxParrent2{
    width: 210px;
}
#box1, #box2, #box3, #box4{
 background: tomato;
 width: 100px;
 height: 100px;
 display: grid;
 justify-content: center;
 align-items: center;
 font-family: Arial;
 font-size: 50px;
 color: #fff;
 cursor: pointer;
}
#box2, #box4{
  position:absolute;
  top: 0;
  left:100px;
  background: #02dce6;
}
#box4{
  left:110px;
  background: #02dce6;
}

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

<div id="boxParrent1">
  <div id="box1">1</div>
  <div id="box2">2</div>
</div>

<div id="boxParrent2">
  <div id="box3">3</div>
  <div id="box4">4</div>
</div>

【讨论】：

【解决方案3】：

尝试将您的 2 个div 放在一个超级div 中

<div id="super">
   <div id="box1">1</div>
   <div id="box2">2</div>
</div>

$('#super').hover(function() {
   console.log("Hovered")
 }, function() {
   console.log("Not")
 });

【讨论】：

我已经尝试过这个解决方案，但它对我不起作用，因为其中一个
是绝对显示的。