3

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.

Jo Hannes
  • 55
  • 2
  • 10

2 Answers2

1

Replace .button:hover { ... } by:

.background:hover .button { ... }

Set the class on your linked background:

<a class="background" href="...">
    <button class="button">...</button>
</a>

The hovering area size becomes the same as the buttons click area. With .background{display:block} you can make a dummy button with bigger hovering area (that also is the click area). That is good for old people trying hit small buttons on small mobile displays. A bigger hovering area is also useful on desktops for preloading, optimize latency, analytic heat mapping, highlight hidden buttons, and other trix.

Alternative

.background:hover {
    /* hovering effects */
}

.background:hover ~ button {
    position:absolute;
    top: 0;
    pointer-events:none; /* click through */
}

Use the adjacent sibling combinator '+' or the general sibbling combinator '~'. Instead of href you can have onclick:

<div class="background" onclick="..."></div>
<button>...</button>
Dan Froberg
  • 168
  • 8
  • The only drawback to this is that the :hover effect will trigger when you mouse over the background, which, as the OP stated, is somewhat larger than the button. Also makes the specificity higher if you're one that cares about such things. – Myykro Apr 04 '23 at 11:30
  • Add
    ...
     with same link as beneath but a hovering area size set to be same as the button.     – Dan Froberg Apr 04 '23 at 11:57
  • Fair enough. You might want to edit that into your answer for the sake of completeness. – Myykro Apr 05 '23 at 11:51
0

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.

Shawn Erquhart
  • 1,820
  • 2
  • 17
  • 30
  • 1) Rather a problem in this case, as it should be easy editable for everyone 2) Thanks, I will try that, but would have prefered a CSS only solution. – Jo Hannes Nov 05 '14 at 17:22
  • To clarify - there is no CSS only solution that meets your criteria. These are the options :) – Shawn Erquhart May 07 '15 at 19:50