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

【问题标题】：whole page affected by hover effect受悬停效果影响的整个页面
【发布时间】：2015-05-29 14:45:36
【问题描述】：

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

这是我的风格

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/

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

【问题讨论】：

a:hover, :visited, :active, :hover 与 a:hover, *:visited, *:active, *:hover 相同......所以它会影响一切

标签： html css hyperlink hover visited

【解决方案1】：

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

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

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

【讨论】：

好的，谢谢，我在 w3schools 上看到了它，但我在另一个例子中看到了它，一个只用逗号做的人。我可能会监督一些事情。在我打开另一个话题之前还有一件事。您是否知道一种方法可以使布局在每种分辨率下都正常工作？如果我现在在 1920/1080 res 上查看我的网站。监控我的FB和不倒翁链接搞砸了..我一直有这个问题。知道任何“全球”解决方案吗？谷歌并没有真正的帮助。
@PatrickHunter 你说的是响应式网页设计。基本上，您需要识别浏览器窗口的像素尺寸，然后相应地设置样式，并且您可以为多个屏幕宽度选项设置多种样式。您还可以使用百分比宽度和其他东西。但是谷歌响应式网页设计教程，你会发现很多东西，比如developers.google.com/web/fundamentals/layouts/rwd-fundamentals。

【解决方案2】：

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

【讨论】：

【解决方案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 将影响您的所有链接元素，甚至是访问过的元素。

【讨论】：

【解决方案4】：

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

【讨论】：

这不是真正的问题；请参阅问题下的@PlantTheldea 评论