CODEWITHSUNDEEP
csshtmlhover
Michael
Michael

Reputation: 133

How can I display div.class when hovering li.class?

On the page biztone.co, in the left sidebar, I am trying to display social share links in a div(.item .details .post-meta), when the main div(#sidebar .recent-post-thumb li) is hovered. I've kind of got it working, except the div(.item .details .post-meta) appears in the box below the hovered box.

Here's the css script I have added to get it to work. But, I need help figuring out why it's displaying in the box below and not the box being hovered..?

.item .details .post-meta { display:none; }
sidebar .recent-post-thumb li:first-child:hover + .item .details .post-meta {
display:block; }
sidebar .recent-post-thumb li:hover + .item .details .post-meta {
display:block; }

Any help is greatly appreciated and will teach me something new.

Upvotes: 0

Views: 761

Answers (2)

jgthms
jgthms

Reputation: 864

It's because of the + sign: it targets the next element.

Remove it and it will target the .post-meta element inside the currently hovered li.

Upvotes: 1

Hamed Al-Khabaz
Hamed Al-Khabaz

Reputation: 680

#sidebar .popular-post-thumb li:hover .post-meta is what you need for a selector instead of going to the next dom element with the +

Change sidebar .recent-post-thumb li:hover + .item .details .post-meta to
#sidebar .popular-post-thumb li:hover .post-meta

Upvotes: 2

Related Questions