logo标签列表

链接悬停无效

cssclasshyperlinkhover
3
a.f_pc {
color:#2972b0;
font-weight:bold;
text-decoration:none;
}

a.f_pc:hover {
text-decoration:underline;
    }


<p><a href="faq.html" class="f_pc">learn more</a></p>

请问为什么我将鼠标悬停在链接上时，悬停效果不起作用？ 谢谢。

1
可能已被更具体的样式覆盖？ - Daryl Teo
你能在 jsFiddle 上提供一个演示吗？我没有看到你提供的 CSS 有任何问题，但是可能存在其他因素影响了你的 HTML 或者 CSS 的其他部分。 - Spudley
正如您的问题所述，它应该可以工作：http://jsfiddle.net/interdream/DQNSb/3/ - James Allardice
谢谢。我刚刚查看了你的fiddle，James，并且正在按照Daryl的建议检查我的代码。我在我的CSS中没有使用“a”元素或类，但是悬停在任何浏览器中都无法工作。我想不出来... - Chris22
以上代码运行良好，没有任何问题。可能是您引用CSS时出现了错误。 - huMpty duMpty
4个回答
6

如果您能发布完整的CSS / HTML，那么它一定被某些东西覆盖了。您可以尝试在规则中添加!important来覆盖它，但我仍然建议找出根本原因。

a.f_pc:hover {
  text-decoration:underline !important;
}
0

可能是p样式覆盖了它，请尝试不使用它并查看是否有效。

#f_mainContent_left p { line-height: 1.4em; padding-bottom: 15px; font-size: 0.8em; padding-top: 3px; } 我已经删除了“p”，但它仍然无效。这是“p”的CSS。 - Chris22
你还记得之前读到过DOCTYPE声明会影响悬停效果的内容吗？你是否已经声明了DOCTYPE？ - A_Porcupine
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 这是文档类型（在Dreamweaver CS 5.5中自动创建） - Chris22
Kasun，我正确地引用了CSS。所有其他样式都显示出来，而且我的CSS目录中只有一个CSS文件，位于我的index.html页面的根目录下：<link rel="stylesheet" href="css/f_hope.css" type="text/css" /> - Chris22
0

在其他页面中它可以正常工作，而在您的文件中它不起作用可能是由于其他CSS覆盖了它。请使用Firebug寻求帮助。

0
我知道你的问题很久以前就解决了，但我一直在寻找答案，我的代码也遇到了同样的问题。在我的情况下，问题是我在:hover之前使用了一个伪元素:visited，这样会出现某种原因导致覆盖。
我通过将其放在visit之下解决了这个问题，这样hover规则就会在之后生效，现在它正常工作了。如果其他人也遇到这个问题，这可能是原因！
我是如何做到的：
.watchlist-link,
.watchlist-link:visited {
    text-decoration: none;
    color: #FFF;
}
    
.watchlist-link:hover {
    color: #ff4444;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接