Question

我已阅读了不少文章，但仍然无法弄清楚。尝试了很多他们提供的方法，但仍然没有运气。

我的html中有这个

<a href="report.html" class="btn btn-success btn-lg">Button 1</a>

这是css在悬停时发生的事情

.btn-success:hover, 
.dropdown-toggle.btn-success {
  background-color: yellow;
}

我想使用js将背景颜色更改为蓝色。

Answer 1

我不确定为什么你需要在你的CSS中更改它时用js做这个。但是，如果必须，您可以使用

将元素添加到元素中

$('.btn-success').addClass('hoverClass');

在你的CSS中

.hoverClass:hover {
    background: green;
}

Answer 2

您可以通过更改类分配来实现此目的。

首先给链接一个ID，这样我们就可以在dom中隔离它。

<a href="report.html" id="myButton" class="btn btn-success btn-lg">Button 1</a>

要更改该链接的外观，您可以将类更改为btn btn-primary btn-lg＆＃34;，＆＃39; btn-primary＆＃39;的默认值。是蓝色的。

document.getElementById("myButton").className = "btn btn-primary btn-lg";

Answer 3

我不知道你为什么转向js，因为css是你需要的最佳选择。我想你可能会发现这个链接的css是某种方式＆＃34;棘手＆＃34;它需要按照＆＃34; lvha＆＃34;的顺序编写，即a：link，a：visited，a：hover和a：活跃

Answer 4

您需要两个Javascript事件，«onmouseover»，当鼠标移动链接时触发，以及«onmouseout»，当鼠标离开链接时触发。我给你写了一个简短的例子。

<html>
    <head>
            <script type="text/javascript">
                    function hoverIn ( element )
                    {
                            element.style.background = "blue";
                    }

                    function hoverOut ( element )
                    {
                            element.style.background = "none";
                    }
            </script>
    </head>
    <body>
            <a href="report.html" onmouseover="hoverIn ( this );" onmouseout="hoverOut ( this );">Click Me</a>
    </body>

改变一个类：用js悬停background-color

4 个答案: