jQuery:在鼠标悬停并单击时，在按钮上切换具有相同特性的类
jQuery:在鼠标悬停并单击时，在按钮上切换具有相同特性的类
提问于 2015-09-08 21:29:04
我有以下几种风格：
button {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}以及下面的jQuery：
$('button').click(function(e) {
$(this).toggleClass('red');
});
$('button').hover(function(e) {
console.log('hoverin');
$(this).toggleClass('green');
});我希望所有按钮都具有以下功能：
当一个按钮被点击时，它应该在红色和蓝色背景之间切换。当一个按钮被悬停时，它应该切换绿色背景。只有当背景是蓝色的时候，这才能在上面的代码中工作。我认为这是因为css的特殊性。
如果是这样，并且我希望所有按钮都具有此功能，那么当红色和绿色具有相同的css特性时，我如何在它们之间切换呢？
小提琴链接：http://jsfiddle.net/rtq2yoxx/
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-09-08 21:33:06
快速解决方案:最后移动.green样式：
button {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}更新Fiddle
您还可以避免使用hover()方法，而使用CSS3悬浮：
button:hover {
background-color: green;
}小提琴2
Stack Overflow用户
发布于 2015-09-08 21:31:53
将.green规则颜色属性设置为!important
button {
background-color: blue;
}
.green {
background-color: green !important;
}
.red {
background-color: red;
}Stack Overflow用户
发布于 2015-09-08 21:45:12
我会使用css悬停的区别：
button {
background-color: blue;
}
button:hover {
background-color: green;
}
.red {
background-color: red;
}Jquery：
$('button').click(function(e) {
$(this).toggleClass('red');
});JS Fiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32467539
复制相关文章
相似问题
腾讯云开发者
