CODEWITHSUNDEEP
htmlcss
yasarui
yasarui

Reputation: 6563

pointer-events:none prevents title attribute

I am having an anchor tag, which should not be clicked so i have added pointer events none.i have a title attribute on the anchor tag need to be shown while hovering. pointer-event:none prevents the title tag from showing up.Is there a way to have both pointer-events:none and title showing up.

a{
  pointer-events:none;
}
<a href="https://stackoverflow.com/" title="Some Sample Title"> Sample Link </a>

Upvotes: 22

Views: 18715

Answers (2)

zer00ne
zer00ne

Reputation: 43880

No, pointer-events: none is pretty encompassing in that any eventType that is associated with the mouse. You could wrap a <span> around the anchor and assign the title to that instead. It's ugly but valid.

Demo

a {
  pointer-events: none;
}
<span title='I am wrapped around this anchor'>
<a href="https://stackoverflow.com/" title="Some Sample Title">Sample Link</a>
</span>

Upvotes: 45

mickaelw
mickaelw

Reputation: 1513

According to: https://css-tricks.com/almanac/properties/p/pointer-events/, I think pointer-event has a very specific use.

If you want interact with the mouse cursor you have cursor attribut and in your case:

a:hover{
  cursor:default;
}
<a href="https://stackoverflow.com/" title="Some Sample Title"> Sample Link </a>

Upvotes: -1

Related Questions