Hover on two elements using jQuery

Question

I have two <div> elements attached to each other, I mean there is no space between them.

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

And I have this jQuery code:

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

My problem is when I move the mouse between box1 and box2, I still get on console log "Not". I want those divs to be considered as one element so when I move the mouse between them I don't get on console log "Not".

Thanks in advance!

Answer 1

I want those divs to be considered as one element

Well, quite simply, they aren't. And they can't be. That's not how HTML and CSS works.

The hover event is triggered one for each individual element bound to the event handler. And every time you leave one of those elements it will print the "not" output as per your instructions.

There is no "fix" for this in the exact way you described, but there are alternative approaches. An obvious solution is to wrap them both in an outer div and bind the hover event to that instead. Then the whole area will be considered as one element (because it literally is). Demo:

 $('#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

friend check the code below. I think it will work for you. As you have dai you have an absolute position div you must need a parent div and the parent div position must be relative. For doing that you have to add just a simple CSS code position: relative; . You also need to do some changes to your jquery code. You can just hover on the parent div and it will do your work. Hope this code will help you.

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

Try to place your 2 div 's in one 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")
 });