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。

使用css sprite制作垂直导航

1 个答案: