我想在单击后更改 div1 的颜色。
当我点击时div1它必须将其背景颜色更改为#4A6B4C但这并没有发生。请帮忙。谢谢
$(document).ready(function()
{
$('#div1').click(function()
{
$('#div1').toggleClass('change');
});
});
#div1{ background-color:#33C43C;width:40px;height:40px;
border-radius:50%;color:white;text-align:center;font-size:30px;}
#div2{text-align:center; color:white;background-color:#33C43C;width:40px;height:40px;border-radius:50%;font-size:30px;}
#div1:hover{cursor:pointer;background-color:#4A6B4C;}
#div2:hover{cursor:pointer;background-color:#4A6B4C;}
.change{background-color:#4A6B4C;} /* div1 must change to this color */
<div id="div1" class="op1">
S
</div>
<br><br>
<div id="div2" class="op">
M
</div>
使用 id 或 use 更新选择器!important带有样式值，因为带有 id 的样式具有更高的优先级。
#div1.change{
background-color:#4A6B4C;
}
$(document).ready(function() {
$('#div1').click(function() {
$('#div1').toggleClass('change');
});
});
#div1 {
background-color: #33C43C;
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
text-align: center;
font-size: 30px;
}
#div2 {
text-align: center;
color: white;
background-color: #33C43C;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 30px;
}
#div1:hover {
cursor: pointer;
background-color: #4A6B4C;
}
#div2:hover {
cursor: pointer;
background-color: #4A6B4C;
}
#div1.change {
background-color: #4A6B4C;
}
/* div1 must change to this color */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="op1">
S
</div>
<br><br>
<div id="div2" class="op">
M
</div>
.change{
background-color:#4A6B4C !important;
}
$(document).ready(function() {
$('#div1').click(function() {
$('#div1').toggleClass('change');
});
});
#div1 {
background-color: #33C43C;
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
text-align: center;
font-size: 30px;
}
#div2 {
text-align: center;
color: white;
background-color: #33C43C;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 30px;
}
#div1:hover {
cursor: pointer;
background-color: #4A6B4C;
}
#div2:hover {
cursor: pointer;
background-color: #4A6B4C;
}
.change {
background-color: #4A6B4C !important;
}
/* div1 must change to this color */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="op1">
S
</div>
<br><br>
<div id="div2" class="op">
M
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
