使用 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() {

  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>

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

Answer 3

尝试将您的 2 放在div一个 super 中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")

 });