CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bCode
bCode

Reputation: 156

e.stopPropagation doesn't work for mouseenter event

I have a div nested in an anchor like this:

<a href="www.example.com">
  <div class="nested-div"></div>
</a>

I want to prevent the anchor from getting underlined or redirected to www.example.com when I hover or click the nested div. I thought this should be possible with event.stopPropagation(), but it doesn't work.

I am able to stop the click event when I click on the nested div from redirecting to the href using this:

$('.nested-div').ready(function() {
  $('.nested-div').click(function(e){
    e.preventDefault();
  });
});

Now I want to also prevent hovering the nested div from getting the anchor underlined, but this doesn't work:

 $('.nested-div').mouseenter(function(e){
    e.stopPropagation();
 });

To be clear I want hovering the anchor itself to have the underlining, but not when the nested div is hovered. Is this possible?

Upvotes: 1

Views: 819

Answers (1)

Libra
Libra

Reputation: 2595

This is caused by CSS and not any scripting rule. Remove the styles with something like this:

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}
<a href="google.com"><div class="nested-div">test</div></a>
vs
<a href="google.com" class="nostyle"><div class="nested-div">test</div></a>

Upvotes: 1

Related Questions