[ CSS / SCSS ] hover시 다른 div 띄우기

HTML

<div class="box_wrap">
    <div class="box__">안녕하세요.</div>
</div>

<div class="box__">안녕하세요.</div>

CSS

.box_wrap {
    position: relative;
    width: 150px;
    height: 150px;
    background: #DDD;
}
.box_wrap:hover .box__ {
    opacity: 1;
}
.box__ {
    opacity: 0;
}

위처럼 box_wrap 내부에 마우스를 가져다대면 안쪽에 있는 box__ 내부에 텍스트가 불투명 상태가 됩니다. 바깥에 있는 box__는 box_wrap 내부에 포함되지 않기 때문에 불투명 상태가 되지 않습니다.