Css hover div to show another div

Question

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>
</div>

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

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

Answer 1

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

Read more here : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships

.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>
</div>

Answer 2

try this

.left:hover + .right{ display: block;}