How can I add hover effect to this Javascript code?

Question

I want to add hover effect to the button like when I hover it its change the background color to #63A244 and the text color to white - #FFFFFF . Thanks in advance.

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>

Probably, you need to check with `:hover` [selector](https://www.w3schools.com/cssref/sel_hover.asp) in css — Batman25663, Aug 29 '17 at 11:57
is it required that you use only JS? because for minor things like background color is the way to go... — DIEGO CARRASCAL, Aug 29 '17 at 11:59
button:hover { background-color:#63A244; color:#FFFFFF; } This on css @BlackB1RD — Flowen, Aug 29 '17 at 11:59
.button:hover (not work) #button:hover (not work) (button):hover (not work) "button":hover(not work) — BlackB1RD, Aug 29 '17 at 11:59
also, check the rendered DOM, what you are seeing as a button could be a span or a div... — DIEGO CARRASCAL, Aug 29 '17 at 12:00
Instead of using the CDN version, [host your own copy with a modified stylesheet](https://github.com/insites/cookieconsent). — Andy, Aug 29 '17 at 12:01
Definitely don't need javascript for something simple like that keep it easy use css hover. a:hover {styles here} — grimesd, Aug 29 '17 at 12:02
i post the full code down here if u can check if i have error in the code i will be more then happy ! @Flowen — BlackB1RD, Aug 29 '17 at 12:06
Possible duplicate of [How can I change a button's color on hover?](https://stackoverflow.com/questions/3898781/how-can-i-change-a-buttons-color-on-hover) — Liam, Aug 29 '17 at 14:05

RaJesh RiJo · Answer 1 · 2017-08-29T12:32:15.163

3

Why don't you try something like below with simple 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">

edited Aug 29 '17 at 12:32

answered Aug 29 '17 at 12:02

RaJesh RiJo

4,302
4
25
46

i post the full code here maybe i have a error in the code if u can check – BlackB1RD Aug 29 '17 at 12:04

score 2 · Accepted Answer · answered Aug 29 '17 at 12:46

2

it looks like you're using external css files that use a override every style that you're using. Look at this JSFiddle, it will do the trick for you :)

I just copy your code and found what element is generated by the JS. Then I apply some style on it.

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

https://jsfiddle.net/cpg0uL31/

answered Aug 29 '17 at 12:46

Lucas.S

126
2

More informations if you're not getting it : a.cc-dismiss = an "a" tag in html with the "cc-dismiss" class on it. – Lucas.S Aug 29 '17 at 12:47
I hope you get why you were not able to apply previous answer :) Don't hesitate to share JSFiddle link with your code, it will help us next time to give you information faster ! Have a great day – Lucas.S Aug 29 '17 at 13:03

Vilapri · Answer 3 · 2017-08-29T12:07:50.367

0

The CSS :hover selector should do it.

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

More info: w3schools

edited Aug 29 '17 at 12:07

answered Aug 29 '17 at 12:02

Vilapri

71
5

not worked i post the full code maybe i have error in the code ? – BlackB1RD Aug 29 '17 at 12:03
1

try his code without the dot... like: button:hover { background-color: #63A244; color: white; } and add ";" after the color – DIEGO CARRASCAL Aug 29 '17 at 12:05
not worked i edit the post and add the full code check it out cause its not work for me the example you give me – BlackB1RD Aug 29 '17 at 12:10
i add to the post the full code check it out cause the code u give me to pot in the – BlackB1RD Aug 29 '17 at 12:11

score 0 · Answer 4 · answered Aug 29 '17 at 13:23

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>

How can I add hover effect to this Javascript code?

4 Answers4