Question

如何使用完全独立的CSS文件来更改/覆盖图像IMAGE.png的URL？

<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div class="class3">
            <div id="id3">
                <a class="logo" href="http://domain.com" tabindex="-1">
                    <img src="https://IMAGE.png"></img>
                </a>
            </div>
        </div>
    </div>
</div>

非常感谢！

Answer 1

您无法使用CSS更改它，您需要使用Javascript。但是，如果您尝试更改图像，例如悬停，则可以删除img-tags并使用div来代替您设置背景图像。然后，在CSS中，您可以创建一个块，用于在悬停时更改图像。

Answer 2

如果你想用css实现它，就这样做（推荐）。

.btn {
	display: block;
	width: 80px;
	height: 80px;
	background: url(http://mygimptutorial.com/images/button-with-metal-ring/13.jpg) no-repeat;
	background-size: contain;
	text-align: center;
	color: #fff;
	text-decoration: none;
}
.btn:hover {
	background: url(http://mygimptutorial.com/images/button-with-metal-ring/8.jpg) no-repeat;
	background-size: contain;
}

<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div class="class3">
            <div id="id3">
                <a class="btn" href="http://domain.com" tabindex="-1"></a>
            </div>
        </div>
    </div>
</div>

用js跟随。

$('.logo img').hover(function(){
	$(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/8.jpg');
},function(){
	$(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/13.jpg');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div class="class3">
            <div id="id3">
                <a class="logo" href="http://domain.com" tabindex="-1">
                <img src="http://mygimptutorial.com/images/button-with-metal-ring/13.jpg"></img></a>
            </div>
        </div>
    </div>
</div>

用于更改图像URL的CSS

2 个答案: