使悬停影响子元素

Question

I have a couple of elements on my page with the following structure:

<div class="selector-wrapper">
  <div class="selector"></div>
</div>

I now want the .selector elements to change to the hover state, when the user hovers the parent element.

I've found this code (I just added $(this) ), but it gives me an error:

[Error] RangeError: Maximum call stack size exceeded.

$('.selector-wrapper').on('mouseenter mouseleave', function(e) {
    $(this).find('.selector').trigger(e.type);
})

What's wrong with this code?

Answer 1

The issue is because the event you fire on the child element is then bubbled up the DOM back to the .selector-wrapper which then fires on the child again and so on recursively.

Instead, don't fire the event on the child element, but do whatever logic you require in the event handler, such as adding a class to change the styling. Try this:

 $('.selector-wrapper').on('mouseenter mouseleave', function(e) { $(this).find('.selector').toggleClass('foo'); // whatever logic you require here... }); 

 .selector-wrapper { width: 100%; height: 100px; background-color: #C00; } .selector { width: 50px; height: 50px; background-color: #0C0; } .foo { width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="selector-wrapper"> <div class="selector"></div> </div> 

Answer 2

Use CSS:

.selector-wrapper:hover .selector{
    /* Css code goes here..*/
}

Answer 3

It's also easy with css:

.selector-wrapper:hover .selector {
    /* Your code*/
}

If you use jQuery, you can easyly use this function:

$('.selector-wrapper').hover(function() {
    // Your code
}

Example:

 $(document).ready(function() { $('.selector-wrapper').hover(function() { $('.selector').toggleClass('show'); }); }); 

 .selector-wrapper { height: 100px; width: 100px; background-color: grey; } .selector { color: white; text-shadow: 5px white; display: none; z-index: 2; font-size: 14px; text-align: center; } .show { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="selector-wrapper"> <div class="selector">JQuery</div> </div>