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

Question

我有两个<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”。

提前致谢！

Answer 1

我希望这些 div 被视为一个元素好吧，很简单，他们不是。他们不可能。这不是 HTML 和 CSS 的工作方式。为绑定到事件处理程序的每个单独元素触发悬停事件。每次您离开其中一个元素时，它都会按照您的说明打印“not”输出。没有按照您描述的确切方式对此进行“修复”，但是有其他方法。一个明显的解决方案是将它们都包装在一个外部 div 中，并将悬停事件绑定到它。那么整个区域将被视为一个元素（因为它确实是）。演示：$('#boxcontainer').hover(function() {&nbsp; console.log("Hovered")}, function() {&nbsp; console.log("Not")});#boxcontainer {&nbsp; border: solid 1px black;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="boxcontainer">&nbsp; <div id="box1">1</div>&nbsp; <div id="box2">2</div></div>

Answer 2

朋友检查下面的代码。我想这对你有用。因为你有 dai 你有一个绝对位置 div 你必须需要一个父 div 并且父 div 位置必须是相对的。为此，您只需添加一个简单的 CSS 代码position: relative;。您还需要对 jquery 代码进行一些更改。您只需将鼠标悬停在父 div 上，它就会完成您的工作。希望这段代码能帮到你。//Box 1 Demo$('#boxParrent1').hover(function() {&nbsp; console.log("Hovered")}, function() {&nbsp; console.log("Not")});//Box 2 Demo$('#boxParrent2').hover(function() {&nbsp; console.log("Hovered")}, function() {&nbsp; console.log("Not")});/*Main Code that are needed*/#boxParrent1, #boxParrent2 {&nbsp; &nbsp; position: relative;}/*Codes Just used to give you a demo*/#boxParrent1, #boxParrent2{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; margin-bottom: 50px;&nbsp; &nbsp; border: 1px solid #000;}#boxParrent1{&nbsp; &nbsp; width: 200px;}#boxParrent2{&nbsp; &nbsp; width: 210px;}#box1, #box2, #box3, #box4{&nbsp;background: tomato;&nbsp;width: 100px;&nbsp;height: 100px;&nbsp;display: grid;&nbsp;justify-content: center;&nbsp;align-items: center;&nbsp;font-family: Arial;&nbsp;font-size: 50px;&nbsp;color: #fff;&nbsp;cursor: pointer;}#box2, #box4{&nbsp; position:absolute;&nbsp; top: 0;&nbsp; left:100px;&nbsp; background: #02dce6;}#box4{&nbsp; left:110px;&nbsp; background: #02dce6;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="boxParrent1">&nbsp; <div id="box1">1</div>&nbsp; <div id="box2">2</div></div><div id="boxParrent2">&nbsp; <div id="box3">3</div>&nbsp; <div id="box4">4</div></div>

Answer 3

尝试将您的 2 放在div一个 super 中div<div id="super">&nbsp; &nbsp;<div id="box1">1</div>&nbsp; &nbsp;<div id="box2">2</div></div>$('#super').hover(function() {&nbsp; &nbsp;console.log("Hovered")&nbsp;}, function() {&nbsp; &nbsp;console.log("Not")&nbsp;});