Hover effect not working as I wanted

1

Hello, for some reason
#item1:hover ~ #item1::before{ display: block; }
does not actually display the element I wanted in block when I hover on #item 1.

Here’s the code and thanks in advance!
https://jsfiddle.net/dyus45w0/

2

#item1 is not a sibling of #item1, it’s the same element. I think you just want it to change on hover: #item1:hover::before {

1 Like
3

Thanks for the reply Dan, I didn’t know that they have to be siblings. For me, this raises another question. What if I wanted to toggle another element inside my code by hovering over this one? For example, if I wanted to toggle an element that is in my footer by hovering over an element on my header.

5

I don’t think it’s possible using pure CSS *I think *. But what I usually do is use the JavaScript event listener.

1 Like
6

You’re using a sibling selector, you are literally saying “match element #item1 if it is a sibling of #item1”, which it can’t be because it’s the exact same element

This is what JavaScript was designed for.