Css hover div, чтобы показать другой div

Question

У меня возникли проблемы с эффектом css hover. У меня есть внешний контейнер в пределах 2 div. В левом div мне нужен эффект зависания, который показывает правый div (ранее скрытый).

доложу код

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

, но эта инструкция (справа Див она скрыта с дисплеем: нет;), кажется, не работает.

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

Answer 1

Вы можете использовать смежный селектор +, чтобы сделать это. Проверьте ниже пример

Подробнее здесь: 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

попробовать это

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