0

我有一个 div 元素，我想在单击 div 时更改其背景图像 - 然后在再次单击时将图像更改回原始图像。div CSS 代码如下，显示了它的 Class 和 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 都使用相同的“类”，然后每个都有一个单独的“id”来给他们单独的图像。

我使用 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 之外的其他方法可以用来来回切换图像吗？

4

2 回答 2

3

这是因为css 规则优先，所以id rule优先class rule。

在您的情况下， id 规则#tab_box1设置了背景图像，然后您尝试使用 class rule 更改它.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%;
}

演示：小提琴

正确的解决方法是在这里使用类而不是 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%;
}

演示：小提琴

于 2013-10-01T16:58:46.643 回答
0

这将使 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 - 正确的用法是什么？

在鼠标按下时更改背景图像

于 2014-02-16T22:42:41.130 回答