Я хочу добавить эффект наведения на 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>
-2
BlackB1RD 29 Авг 2017 в 14:55

4 ответа

Лучший ответ

Похоже, вы используете внешние 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
Lucas.S 29 Авг 2017 в 12:46

Почему бы вам не попробовать что-то вроде ниже с простым hover css.

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

.myButton:hover {
  background-color: red;
}
<input type="button" value="hover me" class="myButton">
3
RaJesh RiJo 29 Авг 2017 в 12:32
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>
0
user8530883user8530883 29 Авг 2017 в 13:23

CSS :hover selector должен это сделать.

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

Дополнительная информация: w3schools

0
Lanrex 29 Авг 2017 в 12:07