CSS 스프라이트를 사용하여 수직 탐색하기

Question

안녕하세요. 스프라이트를 .gif 파일로 사용하여 수직 탐색을하는 데 문제가 있습니다. 나는 회색 배경으로 그것을 갖고 싶다. 그리고 내가 떠올리게 할 때 내 스프라이트를 바꾸고 싶다. 만약 당신이 내 스프라이트를 보면 각 쌍의 2 쌍을 가지고 있는데, 나는 희미해진 아이콘을 먼저 놓아 두어 그것을 100 % 불투명도 아이콘으로 옮기고 싶다. 여기에 내가보기까지 ... 링크를 가지고있는 내 sprite
내 CSS :

#socialmedia { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    background:#666; 
    width:150px; 
} 
#socialmedia a { 
    display:block; 
    width:137px; 
    height:10px; 
    margin: 1em 0; padding:7px 0 10px 20px; 
    font: bold 14px/1 sans-serif; 
    color: #000;no-repeat; 
    text-decoration: none; 
    } 
#socialmedia a:hover { 
    background-position: -157px 0; 
    color: #fff; 
    background: url("images/buttons.gif") 0 0 
    } 
#socialmedia a:active { 
    background-position: -314px 0; 
    color:white; 
    } 

내 HTML : 나는 당신의 스프라이트와 함께 몇 가지를 변경할 것

<ul id="socialmedia"> 
<li><a href="">FB</a></li> 
<li><a href="">TW</a> </li> 
<li><a href="">LI</a></li> 
<li><a href="">GM</a></li> 
<li><a href="">YH</a></li> 
</ul> 

Answer 1

더 쉽게 만들 수 있습니다 - 이미지는 불투명도를 변경하는 것 외에도 마우스를 올리면 가로로 이동하지 않으려면 이미지 사이에 공간이 없어야하며 아이콘이 수직으로 정렬되어야합니다.

#socialmedia { 
margin: 0; 
padding: 0; 
list-style: none; 
background:#666; 
width:150px; 
} 
#socialmedia li a { 
display:block; 
width:137px; 
height:10px; 
margin: 1em 0; 
padding:7px 0 10px 20px; 
font: bold 14px/1em sans-serif; 
color: #666; 
background: transparent url("buttons1.gif") 0 0 no-repeat; 
text-decoration: none; 
} 
#socialmedia li a:hover { 
background-position: 0 -32px; 
color: #fff; 

} 
#socialmedia li a.twitter { 
background-position: 0 -63px; 
} 
#socialmedia li a.linkedin { 
background-position: 0 -127px; 
} 
#socialmedia li a.google { 
background-position: 0 -191px; 
} 
#socialmedia li a.yahoo { 
background-position: 0 -255px; 
} 
#socialmedia li a.twitter:hover { 
background-position: 0 -95px; 
} 
#socialmedia li a.linkedin:hover { 
background-position: 0 -159px; 
} 
#socialmedia li a.google:hover { 
background-position: 0 -223px; 
} 
#socialmedia li a.yahoo:hover { 
background-position: 0 -287px; 
} 

이 그런 다음 HTML 단지 올바른 클래스 추가 :

<ul id="socialmedia"> 
<li><a href="">FB</a></li> 
<li><a href="" class="twitter">TW</a> </li> 
<li><a href="" class="linkedin">LI</a></li> 
<li><a href="" class="google">GM</a></li> 
<li><a href="" class="yahoo">YH</a></li> 
</ul> 

을 오, 당신은 다른 색을해야합니다 여하튼

, 당신은 이런 식으로 뭔가를 할 수 귀하의 링크 텍스트 - 검정 위에 # 000 너무 잘 작동하지 않습니다 :) # 666으로 변경했습니다.