为什么不能在Bootstrap按钮上覆盖CSS背景颜色？
14wml
我想发生什么
实际发生了什么
我想切换red-background类，以便当鼠标悬停在上时button-bullet，它将更改background-color为#FCC1C5。
我不想使用，.btn.button-bullet:hover因为当屏幕上只有一个项目符号元素时，我有一些jQuery逻辑会禁止删除按钮显示出来。
由于某种原因，当我时toggleClass("red-background")，什么也没有出现。
我想可能是因为在CSS，我设定.btn.button-bullet的background-color到transparent。因此，如果这是问题，如何background-color在jQuery中覆盖？
代码
的HTML
<div class="worksheet-problems">
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<div class="input-group input-group-lg worksheet-problem">
<div class="input-group-btn">
<button type="button" class="btn btn-default button-bullet"> <span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"></span> </button>
</div>
<input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here">
<div class="input-group-btn">
<button type="button" class="btn btn-default button-add" aria-label="Add"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
</div>
</div>
的CSS
.red-background{
background-color: #FCC1C5;
}
/*get rid of Boostrap default grey for buttons*/
.btn.button-add, .btn.button-bullet{
background-color: transparent;
}
jQuery的
$(document).ready(function() {
$(".worksheet-problems").on("mouseenter mouseleave", ".button-bullet", function() {
if ($(".worksheet-problems").children().length > 1) {
$(this).children(".glyphicon").toggleClass("glyphicon-one-fine-dot");
$(this).toggleClass("red-background");
$(this).children(".glyphicon").toggleClass("glyphicon-minus-sign");
}
});
});
最大限度
问题：您的red-background班级的特异性低于.btn.button-bullet。
解决方案（添加更多特异性，并将其放置在具有透明背景的选择器之后）：
.btn.button-add, .btn.button-bullet {
background-color: transparent;
}
.btn.red-background {
background-color: #FCC1C5;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
为什么不能在drawRect中更改UIView背景颜色？
- 2
为什么margin：0不能在按钮上使用？
- 3
为什么我不能在框架 tkinter 上放置按钮
- 4
SVG 背景覆盖 CSS 中的按钮颜色
- 5
为什么我不能在 react-native 中更改按钮的颜色
- 6
为什么我不能在Google Cloud Build上覆盖超时？
- 7
为什么我不能在Microsoft Edge上使用页面覆盖？
- 8
为什么我不能在输入上覆盖来自用户样式代理的填充？
- 9
菜单背景颜色为什么不能更改？
- 10
为什么WPF样式标签会覆盖按钮的背景颜色和其他属性？
- 11
为什么这个用于在悬停时反转颜色的 CSS 不能在我的图像上工作？
- 12
为什么我不能在Integer类中覆盖self？
- 13
为什么不能覆盖语义UI CSS？
- 14
为什么我不能在Notepad ++中更改文本背景
- 15
为什么从HTML到CSS的href不能在Django上正常使用？
- 16
为什么我不能在iOS中更改按钮标题
- 17
为什么不能在Bootstrap中将背景更改为“ true”或在将其更改为“ static”后将其删除？
- 18
为什么这种背景颜色不会覆盖我的图像？
- 19
不能在 tkinter 中设置背景颜色
- 20
为什么我不能在桌子上继承父母的宽度？
- 21
为什么我的测试不能在MySQL上运行？
- 22
为什么我不能在类上使用ConditionalAttribute？
- 23
为什么我不能在Mac上正确安装ImageMagick？
- 24
为什么我不能在Ubuntu 12.04上编译GLIBC？
- 25
为什么MutationObserver代码不能在Chrome 30上运行？
- 26
为什么我不能在Mac上安装任何gem？
- 27
为什么不能在文本上使用COUNT（）方法？
- 28
为什么Require指令不能在Apache上正常工作？
- 29
为什么我不能在图像的画布上绘画？
我来说两句