Question

我有一个问题，我有一个div class="tasteTheRainbow"，里面是img标签。一个标记特别是名为.gA3的png类。

现在tasteTheRainbow已经有了一个css后台网址但是当你点击或点击.gA3时我想要更改后台网址。

我尝试了很多其他stackoverflow帖子，但没有找到解决方案。

这是我的HTML和我的CSS：

<div class="tasteTheRainbow">
    <div class="greenArrow">
        <img class="gA1" src="assets/arrows/down.png"/>
        <img class="gA2" src="assets/arrows/in.png"/>
        <img class="gA3" src="assets/arrows/left.png"/>
        <img class="gA4" src="assets/arrows/out.png"/>
        <img class="gA5" src="assets/arrows/right.png"/>
        <img class="gA6" src="assets/arrows/up.png"/>
    </div>
</div>

.tasteTheRainbow {
    background-image: url(../assets/fivePix.png);
    background-repeat: repeat;
    position: absolute;
    background: url(../assets/tombrady1.jpg) no-repeat center center fixed !important;

    -webkit-background-size: cover;
    background-size: cover;
    display: block !important;
}

正如我上面提到的，我尝试过使用CSS classname:active。我也尝试了多个java脚本解决方案，他们根本不会将背景网址更改为image1到image2。

Answer 1

我推荐的解决方案是为元素的初始状态（例如.tasteTheRainbow）以及新状态（例如.tasteTheRainbowNew）创建一个CSS类，然后使用Javascript来应用/删除课程。

$(function () { 
    $(".gA3").click(function () {
         $(this).parent(".tasteTheRainbow").toggleClass("tasteTheRainbowNew"); 
    }); 
});

请在此处查看我的JSfiddle：http://jsfiddle.net/oxv0rc1k/2/

另外，请注意我加载了JQuery，因为我的JS很糟糕，没有它。

css和/或javascript更改单击图像的背景

1 个答案: