Due to my previous question being incorrectly marked as a duplicate, even though it wasn't, and no one is rectifying the mistake, I am re-posting my inquiry.
I am dealing with an <a> element that has a default onClick function. This <a> also has a hover effect that I want to maintain.
How can I disable the onClick function while retaining the hover effect?
P.s., I am particularly interested in a CSS-based solution!
Important note! My previous question was erroneously deemed a duplicate of this post: How to disable a link using only CSS?, but using pointer-events:none; also interferes with the hover effect.
If it is still being flagged as a duplicate, please link it to a question that is truly similar.
Edit: I neglected to mention that my hover effect is achieved in the following manner: 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;
}