Question

我有一个div元素，我想在单击div时更改背景图像 - 然后再次单击时图像会更改回原始图像。 Div CSS代码如下所示，显示其类和ID：

.tab_box
{
width:2%;
height:20%;
position:absolute;
left:100%;
}

#tab_box1
{
background:url('cars.png') no-repeat center center;
background-size:120%;
-moz-background-size:120%;
-o-background-size:120%;
-ms-background-size:120%;
}

我有3个其他div都使用相同的“class”，然后每个div都有一个单独的“id”来给它们提供seaprate图像。

我使用toggleClass尝试了以下j-query / css，但它似乎不起作用：

.one
{
width:2%;
height:20%;
background:url('mots.png') no-repeat center center;
background-size:120%;
position:absolute;
left:100%;
}
<script>
$(document).ready(function(){
$('#tab_box1').click(function() {
$('#tab_box1'').toggleClass("one")
});
});
</script>

有关我出错的地方，或者除了toggleClass之外的其他方法可以用来来回切换图像的任何建议吗？

Answer 1

由于css rule precedence，id rule优先于class rule。

在您的情况下，ID规则#tab_box1正在设置背景图片，然后您尝试使用类规则.one更改它。

一个令人讨厌的修复是在类规则中使用!important，如

.one {
    width:2%;
    height:20%;
    background:url('http://placehold.it/32/f00000') no-repeat center center !important;
    background-size:120%;
    position:absolute;
    left:100%;
}

演示：Fiddle

正确的解决方法是在这里使用类而不是id，比如

<div class="tab_box tab_box1">sadfsdf</div>

而不是

<div id="tab_box1" class="tab_box">sadfsdf</div>

然后

.tab_box1
{
background:url('cars.png') no-repeat center center;
background-size:120%;
-moz-background-size:120%;
-o-background-size:120%;
-ms-background-size:120%;
}

演示：Fiddle

Answer 2

这将使div的行为类似于按钮，在按住鼠标时交换到不同的图像，并在释放鼠标按钮时恢复为原始图像。

$("#button1").mousedown(function() {
    $(this).css({'background-image': 'url(image2.jpg)'}) 
}).mousedown(function(){
    $(this).css({'background-image': 'url(image1.jpg)'}) 
});

HTML：

<div id="button1" style="background-image:url('image1.jpg');"></div>

来源/参考文献：

CSS background-image - What is the correct usage?

changing the background image on mouse down

第一次单击时更改背景图像 - 然后在第二次单击时再次使用jquery将其更改回来

2 个答案: