如何为此Javascript代码添加悬停效果?

时间:2017-08-29 11:55:18

标签: javascript jquery html css

我想将悬停效果添加到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>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:3)

为什么不用简单的hover css尝试类似下面的内容。

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

.myButton:hover {
  background-color: red;
}
&#13;
<input type="button" value="hover me" class="myButton">
&#13;
&#13;
&#13;

答案 1 :(得分:2)

您似乎正在使用外部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/

答案 2 :(得分:0)

CSS :hover selector应该这样做。

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

更多信息:w3schools

答案 3 :(得分:0)

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>