Question

所以我一直在争论有两种不同的方式我可以通过CSS改变我的链接：

     a {
     color: black;
     background-color: goldenrod;
     }
     a:hover {
     color: goldenrod;
     background-color: black;
     }

然后有javascript方式：

    document.querySelectorAll('a')[0].addEventListener('mouseover', menuChange);

    function menuChange(){
        document.querySelectorAll('a')[0].style.color = "goldenrod";
        document.querySelectorAll('a')[0].style.background = "black";
     }

     document.querySelectorAll('a')[0].addEventListener('mouseout', menuNormal);

    function menuNormal(){
        document.querySelectorAll('a')[0].style.color = "black";
        document.querySelectorAll('a')[0].style.background = "goldenrod"; }

两者在比较中相当有用，除了CSS曾经访问过颜色变化，即使我添加了一个：visited {etc ...}。我想知道一个人是否会很快过时，或者不像自2000年以来使用CSS版本可能在一两年之后就出现了。但javascript版似乎永远不会出错。所以我的问题是我应该在我的网站上使用javascript链接更改或CSS？请让我知道两者的优缺点。因为我正在为一家公司创建一个网站，并正在考虑使用哪个网站？

Answer 1

在任何可能的样式问题中使用CSS都是一种很好的做法。当您必须计算某些宽度或高度时，Javascript应该只用于样式元素，因为在CSS中您无法实现这一点。

看看这两个解决方案，您可以看到用CSS编写的代码少了多少才能达到相同的效果，如果您的javascript在用户悬停在元素上之前没有加载，则效果会赢得＆＃ 39;无论如何都要用javascript工作。

此外，使用CSS时，您只需在两个文档之间来回切换，而不是在要更改页面样式时在三个文档之间来回切换。

CSS悬停的几点建议：始终添加：关注你的a：悬停声明，即

a:hover, a:focus{
   color: goldenrod;
   background-color: black;
}

因此，当点击链接时，在页面重定向之前，样式不会发生变化。

此外，由于锚标记是内嵌的，并且您使用背景颜色突出显示悬停，我建议为链接显示块和一些填充以确保背景显示很好。

＆＃13;

a {
    color: black;
    background-color: goldenrod;
	text-decoration:none;
	padding:10px;
}

a:hover, a:focus {
    color: goldenrod;
    background-color: black;
}

＆＃13;

<a href="#">Click Here</a>

＆＃13;

Answer 2

快速回答：不要用JavaScript做。

链接悬停与演示相关，您不想在脚本中处理它。由于CSS3带来了不太新近的功能，因此不应该有很多用例需要脚本来决定鼠标结束时的外观和行为。

JavaScript旨在使页面具有交互性，例如单击按钮，按钮根据用户的要求执行操作。这些交互假设用户正在使用支持适当版本的JavaScript的浏览器。在我看来，这是完全合法的，告知用户他必须启用JavaScript，甚至他需要获得更新的浏览器才能这样做。凌乱的地方是用户需要运行一些脚本才能正确显示页面。如果某些内容侵入用户界面并且不是由演示规则引起的，那么他并不期望这种情况并且可能会感到困惑。

您应该始终在演示和互动之间划清界限。这样更容易实现，也更易于管理。它也可以方便性能，因为脚本不会使用硬件加速来加快速度，而CSS在需要或按需时可以很好地完成它。

现在有哪些更容易使用或更多实现a：悬停或javascript编码链接上的更改？

2 个答案: