我想将悬停效果添加到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;
答案 0 :(得分:3)
为什么不用简单的hover
css尝试类似下面的内容。
.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;
答案 1 :(得分:2)
您似乎正在使用外部css文件,这些文件使用覆盖您正在使用的每种样式。看看这个JSFiddle,它会为你做到这一点:)
我只是复制你的代码并找到JS生成的元素。然后我在它上面应用了一些风格。
a.cc-dismiss{
transition:all .25s;
}
a.cc-dismiss:hover{
color:#ffffff;
background-color:#63A244;
transition:all 0.5s;
}
答案 2 :(得分:0)
答案 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>