Remove click function, but keep hover intact

Question

Since my last question was marked as a duplicate, while it was no duplicate, and no-one is changing it 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: How to disable a link using only 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;
}

Sorry, I voted to close your previous question as I misunderstood what you were asking. In future, rather than asking a new question, simply edit your question to clarify your intent (and explain why you feel it isn't a duplicate). — James Donnelly, Oct 21 '16 at 10:46
So do you really need to use an anchor element there? Anyway James answer is still valid: https://jsfiddle.net/7o3dbak7/1/ — A. Wolff, Oct 21 '16 at 10:48
So you want something like a tooltip, you can put the text of #item2 id inside #item1 in a
tag and you can show it on hover of #item1 id. Why are you creating multiple
Does this answer your question? [Is there a \`pointer-events:hoverOnly\` or similar in CSS?](https://stackoverflow.com/questions/22168420/is-there-a-pointer-eventshoveronly-or-similar-in-css) — Gajus, Mar 05 '20 at 22:39

score 19 · Accepted Answer · answered Oct 21 '16 at 10:37

19

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>

answered Oct 21 '16 at 10:37

James Donnelly

126,410
34
208
218

Okay, that works, but my hover works a bit different. Let me add it to my question! – Maarten Wolfsen Oct 21 '16 at 10:45
@MaartenWolfsen rather than applying `pointer-events: none` to your `#item1` element, apply it directly to the `a` element. `.container ul #item1 a { pointer-events: none; }` – James Donnelly Oct 21 '16 at 10:48
Well, in my case, the a tag is not inside a li to be honest :p – Maarten Wolfsen Oct 21 '16 at 10:59
@MaartenWolfsen I'm not really sure what you're asking. Your question states that you want to disable the click function but retain the hover on an `` element. The markup you've given shows an `` element within a `
` element. What are you actually wanting to happen?

James Donnelly

Oct 21 '16 at 11:02

@MaartenWolfsen your HTML here is invalid. `` elements are not allowed to be direct children of `

` elements. – James Donnelly Oct 21 '16 at 11:15

@MaartenWolfsen simply do what I've done in my answer here; wrap the `` element in a `` element and apply the `pointer-events: none` specifically to the `` element: https://jsfiddle.net/7o3dbak7/8. – James Donnelly Oct 21 '16 at 11:20

Yes! That worked perfectly, stupid I didn't think of it. Thanks alot! :) – Maarten Wolfsen Oct 21 '16 at 11:23

score 0 · Answer 2 · answered Oct 21 '16 at 13:14

I would not use anchor to begin with. Replace anchor with a paragraph tag and modify your CSS.

CSS:

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

HTML:

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

Remove click function, but keep hover intact

2 Answers2