Remove the click function, but keep hovering whole

Question

Since my last question was marked as a duplicate, while it was not duplicated, and no one changes it, I just ask my question again.

I have a <a> which by default has a click function. This <a> also has a hang that I would like to keep.

How to disable click function, but keep hanging?

Ps, I would love to see a CSS solution!

Attention! Last time, my question was marked as a duplicate of this question: How to disable a link using only CSS? but pointer-events:none; also blocks freezing.

If it is still a duplicate, mark it as a duplicate of the question, which is really a duplicate.

---

Edit: I forgot to mention that my freeze happens 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 1

Add pointer-events: none to the a element, then apply guidance to the parent element, focusing on a , specifically inside it:

 span a { pointer-events:none; } span:hover a { color: red; } 

 <span><a href="#">Hello, world!</a></span> 

Answer 2

I would not use the anchor to start. Replace the anchor with a paragraph tag and change 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>