I have parent element which has mouseover event handler implemented using .mouseover() in Jquery.

It has 2 child elements, one contains image element, and second contains description element which has absolute position. On parent mouseover description slides on the image element.

Simplified version of code for the project would look like this:

$('.main-parent').mouseenter(function(){
	$(this).addClass('item-hovered');
}).mouseleave(function(){
	$(this).removeClass('item-hovered');
});

.main-parent {
    position: relative;
}

.child-description {
    color: #fff;
    font-size: 2em;
    position: absolute;
    bottom: -45%;
    opacity: 0;
    transition: all 350ms;
}

.item-hovered .child-description {
    bottom: 10%;
    opacity: 1;
    transition: all 350ms;
}

<script src=".1.1/jquery.min.js"></script>
<div class="main-parent">
    <div class="child-image">
        <img src=".jpg">
    </div>
    <div class="child-description">
        <h4 class="title">Title</h4>
        <p class="subtitle">Subtitle</p>
        <p>Lorem ipsum paragraph...</p>
    </div>
</div>

I have parent element which has mouseover event handler implemented using .mouseover() in Jquery.

It has 2 child elements, one contains image element, and second contains description element which has absolute position. On parent mouseover description slides on the image element.

Simplified version of code for the project would look like this:

$('.main-parent').mouseenter(function(){
	$(this).addClass('item-hovered');
}).mouseleave(function(){
	$(this).removeClass('item-hovered');
});

.main-parent {
    position: relative;
}

.child-description {
    color: #fff;
    font-size: 2em;
    position: absolute;
    bottom: -45%;
    opacity: 0;
    transition: all 350ms;
}

.item-hovered .child-description {
    bottom: 10%;
    opacity: 1;
    transition: all 350ms;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-parent">
    <div class="child-image">
        <img src="https://www.w3schools./w3css/img_lights.jpg">
    </div>
    <div class="child-description">
        <h4 class="title">Title</h4>
        <p class="subtitle">Subtitle</p>
        <p>Lorem ipsum paragraph...</p>
    </div>
</div>

As expected, .child-description is firing mouseover bind to .main-parent element, as it is its child and a part of it.

Is there a way to ignore .child-description element so that it doesn't fire function on mouseover event. The thing is before you hover the element, it is bellow the image made "invisible" to user using opacity: 0;, but it still can be hovered and used to fire mouseover of parent element.

I haven't find answer for this particular solution on stackoverflow, and if there is let me know. I appreciate your help :)

• javascript
• jquery
• html
• css

• 1 by the way, adding overflow:hidden; to your main-parent class, and redefine your selector .item-hovered .child-description in .main-parent:hover .child-description (with pseudo-class hover) can avoid you the javascript (jquery) part in this case. – scraaappy Commented Oct 1, 2018 at 21:38
• Actually @scraaappy, after some experimenting I did that and it is working, added overflow:hidden; to parent and child outside the element box of parent is not triggering mouseenter anymore, but still have needed same code for other purposes. Thank you for the tip :) – Usce Commented Oct 3, 2018 at 14:18

5 Answers 5

Yes, you would intercept the event for that child and then call event.preventDefault() and event.stopPropagation() as shown below.

Also, JQuery no longer remends event shortcut methods, like mouseenter. Instead, they suggest using on().

$(".child-description").on("mouseover", function(event){
  event.preventDefault();  // Cancel the event for this element
  event.stopPropagation(); // Prevent the event from propagating to other elements
});

$('.main-parent').on("mouseenter", function(){
	$(this).addClass('item-hovered');
}).on("mouseleave", function(){
	$(this).removeClass('item-hovered');
});

.main-parent {
    position: relative;
}

.child-description {
    color: #fff;
    font-size: 2em;
    position: absolute;
    bottom: -45%;
    opacity: 0;
    transition: all 350ms;
}

.item-hovered .child-description {
    bottom: 10%;
    opacity: 1;
    transition: all 350ms;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-parent">
    <div class="child-image">
        <img src="https://www.w3schools./w3css/img_lights.jpg">
    </div>
    <div class="child-description">
        <h4 class="title">Title</h4>
        <p class="subtitle">Subtitle</p>
        <p>Lorem ipsum paragraph...</p>
    </div>
</div>

check whether child-description is the target of the event

     $('.main-parent').mouseenter(function (e) {
        if (!$(e.target).hasClass('child-description')) {
            $(this).addClass('item-hovered');
        }
    }).mouseleave(function () {
        $(this).removeClass('item-hovered');
    });

Trying adding the following css rule to .child-description.

pointer-events: none;

.child-description {
  color: #fff;
  font-size: 2em;
  position: absolute;
  bottom: -45%;
  opacity: 0;
  transition: all 350ms;
  pointer-events: none;
}

.item-hovered .child-description {
  bottom: 10%;
  opacity: 1;
  transition: all 350ms;
  pointer-events: auto;
}

This should prevent the element from responding to any mouse events. You will have to swap pointer-events: none; for pointer-events: auto; once you want the element to register interactions.

https://caniuse./#feat=pointer-events

I see some interesting answers here, so, I thought I would offer my own.

Why not use event.target and (in this particular case) event.target.className? Sample JSBIN Demo Online

For instance...

$('.main-parent').mouseover(function(e) {
  if(e.target.className == 'subtitle') {
    console.log("Child mouseover!");
    return;  // child mouseover, ignore
  }

  console.log("Parent mouseover!");

  return true;  // parent mouseover, activate some behavior
});

The advantage here should be observable -- you have quick, easy control of the paths of logic in relatively little code.

You should be able to prevent this using the stopPropagation method:

$('.child-description').on("mouseenter mouseleave", function(event) {
    event.stopPropagation();
});