Question

我正在尝试使用css创建一个悬停链接，但它无法正常工作。这是创建css悬停链接的正确方法吗？谢谢，

我已经看过这个，但没有运气：http://w3schools.com/css/css_link.asp

这是我的代码：

CSS

.Footerbullets{
padding:3px 0 3px 25px;
background-image:url(../images/menubar/footer_bullet.jpg);
background-repeat:no-repeat;
}
.Footerbullets a.link {
color:#FFF;
}
.Footerbullets a.hover {
 color:#FF0;
}

HTML

<div id="footer"><div class="content">
       <ul>
          <li class="Footerbullets"><a href="#">Link with Hover Color Change</a></li>
       </ul>
   <div class="clear"></div>
</div></div>

Answer 1

使用div#footer ul li.Footerbullets a:hover代替.Footerbullets a:hover，似乎div#footer ul li a:hover会覆盖其他样式。

http://jsfiddle.net/GFec3/14/

Answer 2

试试这个

.Footerbullets a:hover {
 color:#FF0 !important;
}

我的代码

<style>
.Footerbullets{
padding:3px 0 3px 25px;
background-image:url(../images/menubar/footer_bullet.jpg);
background-repeat:no-repeat;
}
.Footerbullets a.link {
color:#FFF;
}
.Footerbullets a:hover {
 color:#FF0;
}
</style>

<强> HTML

<div id="footer"><div class="content">
       <ul>
          <li class="Footerbullets"><a href="#">Link with Hover Color Change</a></li>
       </ul>
   <div class="clear"></div>
</div></div>

Answer 3

我为每个锚伪类创建了一个jsfiddle，其中包含一个工作示例。我测试过它至少可以在最新版本的Safari中运行。你可以在这里找到它：

http://jsfiddle.net/kylewlacy/DqePq/

您可以阅读每个伪类以及它们的作用here以及

CSS Hover和Link

3 个答案: