-1

嗨，我在使用精灵作为 .gif 文件进行垂直导航时遇到问题。我希望它具有灰色背景，并在悬停时使用我的精灵进行更改。如果您查看我的精灵，我每个按钮有 2 对，我希望褪色图标首先出现，然后在悬停时将其移动到 100% 不透明度图标。这是我到目前为止所拥有的......链接以查看我的精灵
我的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>
4

1 回答 1

0

我会用你的精灵改变一些东西以使其更容易 - 图像之间应该没有空间并且图标应该垂直对齐，除非你希望它们在鼠标悬停时水平移动除了改变不透明度之外？

无论如何，您可以执行以下操作：

#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。

于 2013-05-31T05:06:09.960 回答