[CSS] CSS RollOver

이 방법은 접근성에 맞지 않다는 말이 많다.

그러니 가급적으로는 프로젝트에 사용하지 않는 것이 좋으나

롤오버에 대한 이해나 접근성에 초점을 맞히지 않은 사이트나 급할때 사용하길 바란다.

우리나라의 모든 사이트가 다 양질의 사이트가 되기를 원하나

실정은...너무나 힘들기만 하니...ㅠ_ㅠ);

스크립트를 잘 이용하거나 텍스트기반에 맞는 롤오버효과를 사용하는것이
접근성에 더 효과적이라고 생각된다.

<style type="text/css">a.rollover img {display:inline; }
a.rollover img.over { display:none; } //hover시에 보여줄 이미지를 처음에 감춰 둡니다.

a.rollover:hover img { display:none; } //hover시에 해당 경로의 모든 이미지를 감춥니다.
a.rollover:hover img.over { display:inline; } //hover로 보여줄 이미지는 보여줍니다.

</style>

<a href="test" class="rollover">
<img src="경로" alt="" />
<img src="" alt="" class="over" /> // 이부분이 이미지가 두번이 중복됨으로 접근성이 떨어집니다.ㅠㅠ
</a>