Question

在我目前正在处理的网站上，我在悬停时强调链接方面存在问题。虽然声明文本修饰：在悬停链接上加下划线，但它无法正常工作。我自己无法解释。

查看网站本身（这是右下角的链接）：http://nils.zamaitat.de/#contact

主页部分的“项目”下拉菜单也是如此：淡入的链接也无法正确处理下划线：http://nils.zamaitat.de/#home

这就是我在CSS中的内容：

section.contact .links ul > li a:hover 
{
  text-decoration: underline;
}

nav ul li ul > li a:hover {
  text-decoration: underline;
}

非常感谢你！

Answer 1

text-decoration: none;中有style.css。这个CSS告诉浏览器渲染没有文本修饰的所有超链接。您需要通过提供!important声明来覆盖该CSS。

因此，对于您希望加下划线的链接，只需将!important声明添加到其对应的CSS ID或Class。

示例

更改自：

a.exampleLinkClass{text-decoration:underline}

到此：

a.exampleLinkClass{text-decoration:underline !important}

Answer 2

style.css的第444行：

.contact div.links ul > li a

这就是右下角的链接最初的样式。这意味着为了覆盖它，即使在更改状态下触发它，您也需要使用附加了:hover的初始使用的相同标识符来调用它，或者您需要使用text-decoration: underline !important;来强制它规则发生。

当css过度使用且过于复杂时，这种情况非常常见。很容易忘记哪个标识符针对哪个元素。

.contact div.links ul > li a可以更改为.contact .links a，因为您使用的是单级li元素而不是下拉列表。

希望有所帮助。

Answer 3

你的CSS很好，没有问题。

它的字体 - 它在webkit浏览器中无法正常工作 - 它在firefox中看起来很好。尝试将字体更改为例如Helvetica，它可以正常工作。

现在为什么它不起作用 - pfff dunno; D之前从未见过那种字体。

编辑：啊，你的字体很多，你只提供了一个电子邮件文件。来自css3please.com：

@font-face {
  font-family: 'WebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

所以你还需要提供一个woff类型 - 你可以在fontsquirrel.com上生成它

为什么文本修饰：下划线不起作用？

3 个答案: