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

Question

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

<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

尝试将您的 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")
 });

Answer 2

I want those divs to be considered as one element

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

每个绑定到事件处理程序的 individual 元素都会触发悬停事件。每次您离开其中一个元素时，它都会按照您的说明打印“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 3

朋友检查下面的代码。我想这对你有用。因为你有 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>

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

Hover on two elements using jQuery

html

javascript

jquery

hover