All geek questions in one place

Anchor pad only available with opacity <1

Using the trick from here: Increase the area of ​​interactive links without affecting the layout , I set a positive margin and a negative margin on the anchor element, with the goal of expanding the clickable area into some text outside the element.

This works, but only if the opacity is below 1! Firefox and Chrome exhibit the same behavior.

Compact demo: http://jsfiddle.net/zGsZK/8/

CSS:

  a { margin-right:-250px; padding-right:250px } .nowork { opacity:1 } .works { opacity:0.999999 }

HTML:

 <body> <a href=# class=nowork>?</a> this black text is not clickable :( <p> <a href=# class=works>!</a> this black text is clickable, as it should be </body>

Is this the way it should work? What for? Is there a way to make it work when opacity == 1?

+4
source share
1 answer

I really don't know why this works, but if you add position:relative; in the nowork class, a click zone will appear above text similar to the works class. I believe this is due to the way browsers render CSS, and since the <p> displayed after binding, its own CSS (where cursor:normal; and not cursor:pointer; ) has priority.

+1
source

Source: https://habr.com/ru/post/1490814/

More articles:


All Articles