Question

我想将悬停效果添加到button，就像我将鼠标悬停在它时将背景颜色更改为＃63A244，将文本颜色更改为白色 - #FFFFFF。提前谢谢。

＆＃13;

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": "#"
    }
  })
});

＆＃13;

<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;

Answer 1

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

＆＃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;

Answer 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/

Answer 3

CSS :hover selector应该这样做。

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

更多信息：w3schools

Answer 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>

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

4 个答案: