CODEWITHSUNDEEP
htmlcsshovershow
user2252219
user2252219

Reputation: 865

CSS show div on hover not working

I can't get the div to show on hover over the other div. I'm sure I'm missing something really basic.

.sidebarRightWork:hover .description {
display:block;}

.description { width:100%; height:100%; margin: 0 auto; position:absolute; background-color:#D4D4D4; z-index:15; display:none;}

enter image description here

enter image description here

EDIT

As you see, when you hover over 'information' nothing happens like it does in your fiddle (https://jsfiddle.net/lmgonzalves/f1c3vc0y/3/).

Upvotes: 1

Views: 1597

Answers (1)

lmgonzalves
lmgonzalves

Reputation: 6588

You need + (adjacent sibling) selector, because .description is not a descendant of .sidebarRightWork, but the next sibling. Just like:

.sidebarRightWork:hover + .description {
    display:block;
}

DEMO

EDIT:

Then you need also:

.sidebarRightWork:hover + .description, .description:hover {
    display:block;
}

DEMO2

Note that I have positioned .description to fill the entire screen. You can do it the way you want ;)

Upvotes: 3

Related Questions