Question

正如标题所说，我的链接有悬停效果，但整个页面因某些原因受到影响。

这是我的风格

a:hover, :visited, :active, :hover
{
color:#fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
text-decoration: none;
color: #009933;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}

https://jsfiddle.net/3qpbv5fo/

顺便说一下，当你在这里时。到目前为止我的代码是否可读？如果你不得不继续建立网站，你会得到我在做什么吗？只是为了让我变得更好。

Answer 1

你之前说:hover之前没有任何元素，所以它指的是一切。

仅仅在第一个选择器中选择a元素是不够的，如果在事物之间加上逗号，它们将被视为完全独立的选择器。因此，a:hover, :hover例如将被视为a:hover和*:hover。

有关如何正确设置链接样式的指南，请参阅this。

Answer 2

删除:hover，因为它将效果应用于页面上的每个可能的元素，ID和类。您的a:hover就足够了，并会对所有悬停链接应用效果。

Answer 3

您必须在:hover，:visited ...前加上特定标记，否则会影响整个页面。

改为执行此操作

 a:hover
{
color:#fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
text-decoration: none;
color: #009933;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}

你不能让a:visited和a:active拥有与a:hover相同的CSS，因为它无效。你需要为这些创建一个单独的CSS块。 a:hover会影响您的所有链接元素，甚至是访问过的元素。

Answer 4

你在你的css中使用:hover 2次会弄乱你的代码。为了正确使用代码，您应该省略最后:hover

整个页面受悬停效果的影响

4 个答案: