使用jQuery悬停在两个元素上

如何解决使用jQuery悬停在两个元素上

我有两个彼此相连的CREATE TABLE EMPLOYEES ( EMPLOYEE_ID NUMBER(6,0) NOT NULL,FIRST_NAME VARCHAR2(20) NULL,LAST_NAME VARCHAR2(25) NOT NULL,EMAIL VARCHAR2(25) NOT NULL,PHONE_NUMBER VARCHAR2(20) NULL,HIRE_DATE DATE NOT NULL,JOB_ID VARCHAR2(10) NOT NULL,SALARY NUMBER(8,2) NULL,COMMISSION_PCT NUMBER(2,MANAGER_ID NUMBER(6,0) NULL,DEPARTMENT_ID NUMBER(4,0) NULL); ALTER TABLE TABLE1 ADD ( CONSTRAINT TAB1_EMPLOYEES_FK FOREIGN KEY (EMP_ID) REFERENCES EMPLOYEES (EMPLOYEE_ID); COMMENT ON TABLE EMPLOYEES IS 'employees table. Contains 107 rows. References with departments,jobs,job_history tables. Contains a self reference.'; 元素，这意味着它们之间没有空格。

ALTER TABLE TABLE1 ADD (
  CONSTRAINT TAB1_EMPLOYEES_FK 
  FOREIGN KEY (EMP_ID) 
  REFERENCES EMPLOYEES (EMPLOYEE_ID);

我有这个jQuery代码：

<div>

我的问题是，当我在box1和box2之间移动鼠标时，仍然出现控制台日志“ Not”。 我希望这些div被视为一个元素，所以当我在它们之间移动鼠标时，不会出现在控制台日志“ Not”上。

谢谢！

解决方法

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

很简单，事实并非如此。他们不可能。这不是HTML和CSS的工作方式。

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

没有按照您描述的确切方式对此进行“修复”，但是有替代方法。一个明显的解决方案是将它们都包装在外部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>

,

朋友检查下面的代码。我认为它将为您工作。当您拥有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>

,

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