У меня есть div с некоторым текстом в нем и «on hover», я хочу отобразить другой div с другим текстом.
Проблема в том, что текст из первого div доходит до второго, и все кажется смешанным. Я бы хотел, чтобы второй div полностью покрыл первый.
Вот jsfiddle
HTML
<div class="outer_box">
<div class="inner_box">
Main</div>
Caption
</div>
CSS
.outer_box {
width:100px;
height:100px;
background-color:orange;
}
.inner_box{
width:100px;
height:100px;
position:absolute;
}
.caption {
width:100px;
height:100px;
background:black;
color:rgba(255,255,255,1);
opacity:0;
}
.outer_box:hover .caption{
opacity:1;
}
Благодаря!