0

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

这是我的风格

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/

顺便说一句，当你在它的时候。到目前为止我的代码可读吗？如果您必须继续构建网站，您会明白我在做什么吗？只为让我变得更好。

4

4 回答 4

1

您说:hover的是其他前面没有元素，所以它指的是一切。

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

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

于 2015-03-25T18:47:40.573 回答
0

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

于 2015-03-25T18:51:18.657 回答
0

您必须在: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你一样的 CSS，a:hover 因为它不能正常工作。你需要为这些单独的 CSS 块。a:hover将影响您的所有链接元素，甚至是访问过的元素。

于 2015-03-25T18:54:15.053 回答
0

你在你的 css 中使用:hover 了 2 次，这会弄乱你的代码。您应该省略 last:hover以正确运行您的代码

于 2015-03-25T19:12:44.223 回答