Maarten Wolfsen Maarten Wolfsen - 1 month ago 10
CSS Question

Remove click function, but keep hover intact

Since my last question was marked as a duplicate, while it was no duplicate, and no-one is changing is back, I will just ask my question again.

I have an

<a>
, which has, by default, a on-click function. This
<a>
also has a hover, which I would like to keep.

How do I disable the click function, but keep the hover?

P.s., I would love to see a CSS solution!

Important! Last time, my question was marked as a duplicate of this question: Disable link using css, but
pointer-events:none;
is also blocking the hover.


If it is still a duplicate, please mark it as a duplicate of a question that is truly a duplicate.




Edit:
I forgot to mention, that my hover is made like this:
https://jsfiddle.net/7o3dbak7/7/

HTML:

<div class="container">
<ul>
<li id="item1"><a href="somelinkthatistherebecauseitis">hoverable object</a></li>
<li id="item2">text object, here comes alot of text explaining certain features of the website.</li>
</ul>
</div>


CSS:

.container ul #item2 {
display: none;
width: 150px;
padding: 20px;
background: red;
color: white;
cursor: pointer
}

.container ul #item1 {
pointer-events: none;
}

.container ul #item1:hover + #item2 {
display: block;
}

Answer

Add pointer-events: none to the a element, then apply the hover to the parent element, targeting the a specifically within that:

span a {
  pointer-events:none;
}

span:hover a {
  color: red;
}
<span><a href="#">Hello, world!</a></span>