Search code examples
csshovermousehoverpointer-eventsclick-through

Click-through with hover effect in CSS

I'm trying to make a button without a link, as the background is already linked. Therefore you should be able to cick through it. I know about pointer-events:none but when using this, the div's :hover won't work anymore.

Is there any way to achieve this?

My HTML is:

<div class="button">
<span>Click here</span>
</div>

CSS:

.button { pointer-events: none; }
.button:hover { ... }

The "button" class should have an :hover effect + click through. This setup won't show the :hover effect.

Solution

  • Without seeing your code I would suggest one of two routes:

    1) Just link both. No bigs.

    2) Link your background via javascript. If the button is a child element, the click event will bubble to your linked background.