728x90
마우스를 올렸을 때 백그라운드 포지션이 바뀌면서 롤오버 효과를 내는 것이 가능합니다.
소스를 보면 하단과 같습니다.
<style>
.top {
width:100%;
height:50px;}
.top li {
list-style:none;
display:inline;}
.menu a {
display:inline-block;
width:50px;
height:50px;
overflow:hidden;
background:url('img.jpg') no-repeat; text-decoration:none;
font-size:0px;}
.menu a:hover {
background-position:0 -50px;}
</style>
<body>
<ul class="top">
<li class="menu"><a href="#">메뉴 1</a></li>
<li class="menu"><a href="#">메뉴 2</a></li>
<li class="menu"><a href="#">메뉴 3</a></li>
</ul>
</body>
이때 아래와 같이 버튼의 롤오버와 온을 한 이미지로 만들어 줍니다.
위에 마우스를 올리지 않았을 때,
아래쪽에 마우스를 올렸을때 이미지를 연결해 줍니다.
여기서 중요한게 마우스를 오버했을때 포지션위치를 바꾸는 것인데,
a:hover; 에서
background-position:0 -(이미지 height에 1/2 높이)px; 를 꼭 체크합니다.
본 포스팅에 샘플파일을 첨부했으니 다운받아서 테스트 고고!!
반응형
'공부 > html, css' 카테고리의 다른 글
| 자동줄바꿈 속성 (white-space, word-break, word-wrap, text-overflow) (0) | 2023.01.07 |
|---|---|
| 크로스브라우징 CSS핵 (0) | 2023.01.07 |
| 마우스오버 시 백그라운드 색상 변환 (0) | 2023.01.07 |
| 선택자 (구조선택자) : nth-child, first-child, first-child (0) | 2023.01.07 |
| div 이동 (0) | 2023.01.07 |
