无法使用CSS更改图像源。

唯一可能的方法是使用Javascript或任何类似jQuery的Javascript库。

逻辑-

图像位于一个div中，并且该图像没有类或id。

因此，逻辑将是选择图像所在的div中的元素。

然后使用循环选择所有图像元素，并使用Javascript/jQuery更改图像src。

带有演示输出的示例代码-

$（文档）.ready（函数）{$（“button”）.click（函数）{$（“#d1.c1 a”）.each（函数）{$（this）.children（'img'）.attr（'src'，'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');});});});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js“></script><div id=“d1”><div class=“c1”><a href=“#”><img src=“img1_on.gif”></a><a href=“#”><img src=“img2_on.gif”></a></div></div><button>更改图像</button>

我在这里做了一个完全具有这种功能的代码笔。我也会在这里给你一个代码的分解。

代码笔

$（函数）{//倾听女孩按钮的点击$（'#girl btn'）.click（函数）{//单击女孩按钮后，将#square图像的源更改为女孩PNG$（'#square'）.prop（“src”，“https://homepages.cae.wisc.edu/~ece533/images/girl.png“）；});//聆听飞机按钮的点击$（“#plane btn”）.click（函数）{//单击平面按钮后，将#square图像的源更改为平面PNG$（'#square'）.prop（“src”，“https://homepages.cae.wisc.edu/~ece533/images/airplane.png“）；});//聆听水果按钮的点击$（“#fruits btn”）.click（函数）{//单击水果按钮后，将#square图像的源更改为水果PNG$（'#square'）.prop（“src”，“https://homepages.cae.wisc.edu/~ece533/images/fruits.png“）；});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><img src=“https://homepages.cae.wisc.edu/~ece533/images/girl.png“id=”square“/>＜div＞<button id=“girl btn”>女孩</button><button id=“plane btn”>平面</button><button id=“fruits btn”>水果</button><a href=“https://homepages.cae.wisc.edu/~ece533/images/“>图像来源</a></div>

可以使用jQuery的attr（）函数。例如，如果img标记的id属性为“my_image”，则可以执行以下操作：

<img id="my_image" src="first.jpg" alt="Insert link 1 alt text here" />

然后，您可以使用jQuery更改图像的src，如下所示：

$("#my_image").attr("src","second.jpg");

要将其附加到单击事件，可以编写：

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

要旋转图像，可以执行以下操作：

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

当改变图像源时，人们会犯的一个常见错误是不等待图像加载来执行后续操作，如成熟的图像大小等。在图像加载之后，您需要使用jQuery.load（）方法来执行操作。

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

编辑原因：https://stackoverflow.com/a/670433/561545

只是一个补充，使其更为微小：

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

您应该向图像标记添加id属性，如下所示：

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

然后您可以使用此代码更改图像的来源：

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });