hover 할 때 텍스트가 위아래로 왔다갔다.. 선명했다 흐려졌다 하는 문제 해결
HTML, CSS로 인해 생기는 알 수 없는 문제는 정말
되도록이면 만나고 싶지 않다!
태그를 잘못 썼든지 닫지 않았든지
CSS를 어떻게 중첩으로 먹여 그랬든지..
아아.. 알 수 없다.
아무튼 사건은 이랬다.
div 박스에 이미지를 넣고 hover 하면
흐려지면서 한가운데 텍스트가 보이는
그런 흔한 이펙트 효과를 구현하고 있었다.
그런데 CSS를 다 주고 나서 hover를 했더니
텍스트가 위아래로 춤을 추는 게 아닌가?! -ㅅ-
그 구조를 간단히 하자면 이러했다.
<수정 전>
HTML
<div class="box">
<a>
<span class="text">text</span>
<span class="curtains"></span>
<img />
</a>
</div>
CSS
.text,
.curtains {
visibility: hidden;
opacity: 0;
.box:hover .text,
.box:hover .curtains {
visibility: visible;
opacity: 0;
}
<수정 후>
HTML
<div class="box">
<a>
<span class="curtains">
<span class="text">text</span>
</span>
<img />
</a>
</div>
CSS
.curtains {
visibility: hidden;
opacity: 0;
.box:hover .curtains {
visibility: visible;
opacity: 0;
}
뭐가 달라졌는지 모르겠는가?
바로 HTML에서 curtains에 taxt를 넣고
text에 직접적으로 visibility, opacity를
주던 것을 빼고 curtains에게만 효과를 주었다.
휴.. 근데 이렇게 하면 IE 구버전에서는
분명 안 보여야할 text가 선명하게! 보이는! 현상을 만날 수도 있다.
전에 겪어봤으니까 흙.. 그건 이번에 구버전 테스트하고 다시 적어야겠다.