CODEWITHSUNDEEP
csshover
Toniq
Toniq

Reputation: 5006

Css pointer-events hover issue

I have to following code:

<div class="playlist-item">
  <a class="playlist-non-selected" href="#">
    <span class="playlist-title">AudioAgent - Japanese Intro</span>
  </a>
</div>

https://jsfiddle.net/4uyb7rh9/10/

The problem is when you rollover the text, in firefox and ie overPlaylistItem & outPlaylistItem are constantly called and cursor just keeps flickering. This works properly in chrome. Is there a way to make this work in all browsers?

Upvotes: 1

Views: 7475

Answers (2)

Asons
Asons

Reputation: 87191

This happens because when you set the class having pointer-events: none it triggers a mouse leave event, hence it flashes.

First of all, may I suggest you use :hover, second, whether you use :hover or script, you need to target the specific element that shouldn't be clickable, for example the span

.playlist-non-selected:hover span {
  pointer-events: none;
}

Stack snippet

.playlist-item {
  position: relative;
  top: 0px;
  left: 0px;
  height: 40px;
  margin-bottom: 5px;
  overflow: hidden;
  line-height: 40px;
}
.playlist-title {
  display: inline-block;
  position: relative;
  top: 0px;
  margin-left: 20px;
  overflow: hidden;
  font-size: 22px;
  font-family: 'Gnuolane Free';
  margin-bottom: 0px;
}
.playlist-non-selected {
  color: #bbb;
}
.playlist-non-selected:hover{
  color: red;
}
.playlist-non-selected:hover span{
  pointer-events: none;
}
<div class="playlist-item">
  <a class="playlist-non-selected" href="#">
    <span class="playlist-title">AudioAgent - Japanese Intro</span>
  </a>
</div>

And here is an updated fiddle using your script

Update based on comment about not working in Edge

Appears to be some kind of bug in Edge when the span has display: block so changing it to display: inline-block and it works.

For it to work in IE11, the span need display: inline (or just remove the display:...) so it use its default.

Update 2 based on comment about not working in Edge

If you need the span to display as block, changing it to a div and it works in both Edge and IE11.

An updated fiddle using your script

Upvotes: 2

Tushar Gupta
Tushar Gupta

Reputation: 15913

Why haven't you used :hover ? This can be done with CSS easily and will not pose any difficulty for browsers compatability like

.playlist-item {
  position: relative;
  top: 0px;
  left: 0px;
  height: 40px;
  margin-bottom: 5px;
  overflow: hidden;
  line-height: 40px;
}

.playlist-title {
  display: block;
  position: relative;
  top: 0px;
  margin-left: 20px;
  overflow: hidden;
  font-size: 22px;
  font-family: 'Gnuolane Free';
  margin-bottom: 0px;
  backface-visibility:hidden
}

.playlist-non-selected:hover{
  color: red;
  pointer-events: none;
  backface-visibility:hidden
}

.playlist-non-selected {
  color: #bbb;
}
<div class="playlist-item">
  <a class="playlist-non-selected" href="#">
    <span class="playlist-title">AudioAgent - Japanese Intro</span>
  </a>
</div>

Upvotes: 1

Related Questions