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가 선명하게! 보이는! 현상을 만날 수도 있다.

전에 겪어봤으니까 흙.. 그건 이번에 구버전 테스트하고 다시 적어야겠다.