我如何为这段Javascript代码添加悬停效果？
我如何为这段Javascript代码添加悬停效果？
提问于 2017-08-29 19:55:18
我想给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>
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-08-29 20:46:04
看起来您使用的是外部css文件，这些文件使用覆盖您正在使用的每个样式。看看这个JSFiddle，它会帮你完成这项工作:)
我只是复制了您的代码，并找到了JS生成的元素。然后我会给它加上一些样式。
a.cc-dismiss{
transition:all .25s;
}
a.cc-dismiss:hover{
color:#ffffff;
background-color:#63A244;
transition:all 0.5s;
}Stack Overflow用户
发布于 2017-08-29 20:02:18
你为什么不试试下面这样的简单的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">
Stack Overflow用户
发布于 2017-08-29 20:02:28
CSS :hover selector应该可以做到这一点。
button:hover {
background-color: #63A244;
color: white;
}更多信息：w3schools
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45938514
复制相关文章
相似问题