Jquery mouseenter fails to detect when leaving span element and does not trigger again

Question

Jquery mouseenter fails to detect when leaving span element and does not trigger again

If I have a code snippet like this

<div id='one'>xyz
  <span id='two'>abc</span>
</div>

I am attempting to hover over element one, then element two, and finally back to one. However, I am facing an issue with jQuery not recognizing when I am leaving element two and re-entering element one. I need to be able to trigger an event when I re-enter one.

Is there any way to accomplish this without making changes to the HTML markup of the page? Unfortunately, I do not have permission to modify it.

javascript jquery html css

Answer 1

Answer №1

Here is a code snippet that could be useful for you:

#one{
width:100px;
height:100px;
position:relative
}
#one:hover{
width:150px;
height:160px;
background-color:red;
}
#two{
width:100%;
position:absolute;
height:100px;
}
#two:hover{
width:100px;
background-color:green;
height:100px;
}

<div id='one'>xyz
  <span id='two'>abc</span>
</div>

Answer 2

Here is a code snippet that could be useful for you:

#one{
width:100px;
height:100px;
position:relative
}
#one:hover{
width:150px;
height:160px;
background-color:red;
}
#two{
width:100%;
position:absolute;
height:100px;
}
#two:hover{
width:100px;
background-color:green;
height:100px;
}

<div id='one'>xyz
  <span id='two'>abc</span>
</div>

Answer 3

Answer №2

If you're looking to achieve a similar effect, you can implement the following code snippet:

$('div#two').on(('mouseenter', 'mouseleave'), function(event) {
    event.stopPropagation();
});

$('body').on('mouseenter', '#one', function(e){
  console.log('You entered element with ID: ', $(this).attr('id'));
}).on('mouseleave', '#one', function(){
  console.log('You left element with ID: ', $(this).attr('id'));
});

$('body').on('mouseenter', '#two', function(){
  console.log('You entered element with ID: ', $(this).attr('id'));
}).on('mouseleave', '#two', function(){
  console.log('You left element with ID: ', $(this).attr('id'));
});

#one{
  background-color: red;
}
#two{
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='one'>Lorem ipsum
  <span id='two'>dolor sit amet</span>
</div>

Answer 4

If you're looking to achieve a similar effect, you can implement the following code snippet:

$('div#two').on(('mouseenter', 'mouseleave'), function(event) {
    event.stopPropagation();
});

$('body').on('mouseenter', '#one', function(e){
  console.log('You entered element with ID: ', $(this).attr('id'));
}).on('mouseleave', '#one', function(){
  console.log('You left element with ID: ', $(this).attr('id'));
});

$('body').on('mouseenter', '#two', function(){
  console.log('You entered element with ID: ', $(this).attr('id'));
}).on('mouseleave', '#two', function(){
  console.log('You left element with ID: ', $(this).attr('id'));
});

#one{
  background-color: red;
}
#two{
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='one'>Lorem ipsum
  <span id='two'>dolor sit amet</span>
</div>

Answer 5

Answer №3

Once you step into two, you are forever intertwined with one, as two resides within the confines of one. As a result, the mouseenter event triggered by one will not activate when entering its descendants.

To differentiate this behavior, consider adding a mouseenter event to all descendants of one in order to monitor mouseleave from one, along with a corresponding mouseleave event on one itself.

$("#one").mouseenter(function(){
   // Entering one
});

$("#one").children().mouseleave(function(){
   // Re-entering one 
});

Answer 6

Once you step into two, you are forever intertwined with one, as two resides within the confines of one. As a result, the mouseenter event triggered by one will not activate when entering its descendants.

To differentiate this behavior, consider adding a mouseenter event to all descendants of one in order to monitor mouseleave from one, along with a corresponding mouseleave event on one itself.

$("#one").mouseenter(function(){
   // Entering one
});

$("#one").children().mouseleave(function(){
   // Re-entering one 
});

Answer 7

Answer №4

When the mouse is inside either #two or #one, only the mouseenter event occurs because the mouse does not leave #one.

Give this a try:

$(document).ready(function(){

  $('#two').hover(function(){
    $('#one').toggleClass('newCss');
  },function(){
    $('#one').toggleClass('newCss');
  })

  $('#one').hover(function(){
    $(this).toggleClass('newCss');
  })

})

  $(document).ready(function(){
    $('#two').hover(function(){
      $('#one').toggleClass('newCss');
    },function(){
      $('#one').toggleClass('newCss');
    })
    
    $('#one').hover(function(){
      $(this).toggleClass('newCss');
    })
  })

#one {
  width: 200px;
  height: 200px;
  padding: 30px;
  background-color: red;
}

#two {
  width: 100px;
  height: 100px;
  background-color: blue;
  padding: 30px;
}

#two:hover {
  background-color: orange;
}
    
.newCss {
  background-color: green!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id='one'>xyz
  <span id='two'>abc</span>
</div>

Answer 8

When the mouse is inside either #two or #one, only the mouseenter event occurs because the mouse does not leave #one.

Give this a try:

$(document).ready(function(){

  $('#two').hover(function(){
    $('#one').toggleClass('newCss');
  },function(){
    $('#one').toggleClass('newCss');
  })

  $('#one').hover(function(){
    $(this).toggleClass('newCss');
  })

})

  $(document).ready(function(){
    $('#two').hover(function(){
      $('#one').toggleClass('newCss');
    },function(){
      $('#one').toggleClass('newCss');
    })
    
    $('#one').hover(function(){
      $(this).toggleClass('newCss');
    })
  })

#one {
  width: 200px;
  height: 200px;
  padding: 30px;
  background-color: red;
}

#two {
  width: 100px;
  height: 100px;
  background-color: blue;
  padding: 30px;
}

#two:hover {
  background-color: orange;
}
    
.newCss {
  background-color: green!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id='one'>xyz
  <span id='two'>abc</span>
</div>

Jquery mouseenter fails to detect when leaving span element and does not trigger again

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Change the size of a particular div upon hovering over another element

What is the best way to incorporate a toggleable dropdown feature using a button in a React application?

Discovering elements in Selenium that are dynamically loaded using JavaScript

Perform the default event prior to executing the custom click function

Is it possible to create vertical-floating elements using CSS?

Encountering a Module not found error with a ValidationError when trying to import an SVG file within a React

Exploring the depths of nested image objects using the map method in ReactJS

Exploring the Power of JQuery Load and CSS styling

How can I populate an array to use in a datatable when rendering?

Using jQuery and regex to validate a long string containing lowercase letters, uppercase letters, numbers, special characters, and

The webpage is experiencing difficulty loading the image

Can you explain the functionality of templates in the Primeng grid for Angular 6?

Tips for keeping Sub Menu visible at all times

A method for replacing keys within an object with those from another object

Import of Bootstrap causing disruption in positioning of <figure> element

Refreshing only a portion of the back-end using dynamic imports

The ng2-dnd library encountered an issue: StaticInjectorError in AppModule with SortableComponent pointing to ElementRef

Recursive instruction malfunctioning

Create a Bootstrap modal that includes an object tag to embed a PDF file

Creating applications with Angular2 and TypeScript is possible even without utilizing NPM for development