整个页面受悬停效果影响

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 之前没有元素，所以它指的是所有内容。

select 第一个 a 元素是不够的 select 或者只有，如果你在事物之间放置逗号，它们将被视为完全独立的 select或。因此 a:hover, :hover 例如将被读作 a:hover 和 *:hover.

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

Answer 2

删除 :hover 因为它会将效果应用到页面上的每个可能的元素、ID 和 class。您的 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 将影响所有 link 元素，甚至是访问过的元素。

Answer 4

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

整个页面受悬停效果影响

whole page affected by hover effect

html

css

hyperlink

visited

hover