如何向此 Javascript 代码添加悬停效果？答案

【问题标题】：How can I add hover effect to this Javascript code?如何向此 Javascript 代码添加悬停效果？
【发布时间】：2018-02-06 21:00:29
【问题描述】：

我想为button添加悬停效果，就像我悬停它时将背景颜色更改为 #63A244 并将文本颜色更改为白色 - #FFFFFF 一样。提前致谢。

window.addEventListener("load", function() {
  window.cookieconsent.initialise({
    "palette": {
      "popup": {
        "background": "#ffffff",
        "text": "#63a244"
      },
      "button": {
        "background": "transparent",
        "text": "#63a244",
        "border": "#63a244"
      }
    },
    "position": "top",
    "content": {
      "message": "Cookies Massage",
      "dismiss": "OK",
      "link": "Read More",
      "href": "#"
    }
  })
});

<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<!DOCTYPE html>
<html dir="rtl" lang="he">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
</head>

</html>

【问题讨论】：

你试过了吗？
你为什么不简单地使用 .addClass 或 .css ？
我不知道你能帮我做吗？我尝试使用
可能，你需要在css中检查:hoverselector
.button #button（按钮）“按钮”

标签： javascript jquery html css

【解决方案1】：

你为什么不试试下面的简单hover css。

.myButton {
  width: 200px;
  height: 50px;
  color: #fff;
  border: none;
  background-color: blue;
  transition: all 0.4s ease;
}

.myButton:hover {
  background-color: red;
}

&lt;input type="button" value="hover me" class="myButton"&gt;

【讨论】：

我在这里发布完整的代码，如果你可以检查，我可能在代码中有错误

【解决方案2】：

CSS :hover selector 应该这样做。

button:hover {
   background-color: #63A244;
   color: white;
}

更多信息：w3schools

【讨论】：

不工作我发布了完整的代码也许我的代码有错误？
试试他的不带点的代码...比如：button:hover { background-color: #63A244;白颜色; } 并添加“;”颜色后
不工作我编辑帖子并添加完整代码检查它因为它对我不起作用你给我的例子
我将完整的代码添加到帖子中，检查一下，因为你给我的

【解决方案3】：

看起来您正在使用外部 css 文件，这些文件使用覆盖您正在使用的每种样式。看看这个 JSFiddle，它会为你解决问题:)

我只是复制了你的代码，然后找到了 JS 生成的元素。然后我在上面应用一些样式。

a.cc-dismiss{
  transition:all .25s;
}
a.cc-dismiss:hover{
  color:#ffffff;
  background-color:#63A244;
  transition:all 0.5s;
}

https://jsfiddle.net/cpg0uL31/

【讨论】：

更多信息，如果你没有得到它：a.cc-dismiss = html中的一个“a”标签，上面有“cc-dismiss”类。
我希望你明白为什么你不能应用以前的答案:) 不要犹豫与你的代码分享 JSFiddle 链接，这将有助于我们下次更快地为你提供信息！祝你有美好的一天

【解决方案4】：

function mouseOver() {
  $("#btn").addClass("text bg");
  $("#btn").text("your text");
}

function mouseOut() {
  $("#btn").removeClass('text bg')
  $("#btn").text("Mouse over me");
}

.text {
  font-size: 30px;
  color: #FFFFF;
}

.bg {
  background-color: #63A244;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse over me</button>

【讨论】：