Alessio Di Marco Alessio Di Marco - 1 year ago 107
CSS Question

Css hover div to show another div

I'm having some trouble about css hover effect.
I have external container within 2 div.In left div i need hover effect that show right div(previously hidden).

I'll report code

<div class="block-attr">
<div class="left"></div>
<div class="right">Hidden text </div>

but this instruction (right div it's hidden with display:none;) seem not to work.

.block-attr .left:hover .right{display:block;}

Answer Source

You can use the adjacent selector + to do that. Check below example

Read more here :

.right {
  display: none;
.block-attr .left:hover + .right {
  display: block;
<div class="block-attr">
  <div class="left">Hover here</div>
  <div class="right">Hidden text</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download