Javascript 仅使用CSS更改图像。

我有点像

<a href="OnlyThisONE"
 <img class="SameClassForAllIMG" src="random.png"> 
</a>

---

问题是CSS应该只在OnlyThisONE href下为IMG做这件事，而不是全部。这是否可能只使用CSS

这仅使用CSS是可能的。您可以使用[href='OnlyThisONE']将图像作为目标，并在其中隐藏标记，然后将背景应用于链接

CSS

---

您可以使用以下几种方法。在我看来，最好的是1，因为它有最广泛的浏览器支持，并且避免了使用JS

1-您可以仅选择一个，假设href是唯一的，显示背景图像，然后隐藏包含的图像。您还需要在A``上指定宽度、高度和显示：

2-使用内容：url，但它没有广泛的浏览器支持 -在对content:url的支持进行了快速的自我检查之后，我根本不建议这样做。我只能让它在Chrome上工作。你自己试试吧：

---

3-使用问题中的JavaScript。

如果src是random.png，则会显示new.png

HTML

我猜这段代码与您的JavaScript解决方案相同

IE7>=版本 IE8>=版本

---

在CSS中，您可以在

a:hover+img背景与最老的IE一起工作，它使alt属性保持有用，这将是我的选择。伪元素：after/：before适用于IE8，但不适用于：after/：：*before语法

---

当然，在css中，还有许多其他的解决方案，使用或不使用半透明gif/png或img：…..

IMO，使用css所做的是隐藏一个图像，然后显示另一个图像。虽然这不是随机的，除非使用预处理器，否则@Sten更改背景与更改“src”属性并不相同。您可以使用CSS的“内容”属性。我在下面添加了一个示例。在CSS中，您无法更改源代码，因此背景或伪元素看起来是唯一CSS解决方案的正确选项。@Danko错了。如果设置“显示：内联块”，则可以具有宽度/高度。另外，如果你特别检查content:url的支持，你会发现它一点也不好。你自己创建一个测试页面并尝试一下。在Firefox或IE中它对我不起作用。如果我在这里遗漏了什么，请告诉我。我的错误我的朋友似乎只在少数情况下起作用，但在这种情况下不会删除我的评论，我看到你为第一个选项+1添加了正确的选项

var images = document.getElementsByTagName('IMG');
for (var i = 0; i < images.length; ++i) {
    if (images[i].src == "random.png")
        images[i].src = 'new.png';
}  

.SameClassForAllIMG {
  background: url(new.png) no-repeat;
}

a[href='OnlyThisONE'] img {
    display: none;
}
a[href='OnlyThisONE'] {
    background: url('somebackground.jpg');
    width: 100px;
    height: 100px;
    display: block;
}

a[href$='OnlyThisONE'] img {
    display: none; /* hide the image that's there */
}
a[href$='OnlyThisONE'] {
    background: url(someOtherImage.jpg) /* show another image as a background */
    display: inline-block;
    height: 100px;
    width: 100px;
}

a[href$='OnlyThisONE'] img {
    content:url("newImage.jpg");
}

<a href="#">
 <img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=random.png">
 <span></span>
</a>

<a href="#">
 <img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=images.png">
 <span></span>
</a>

img.SameClassForAllIMG[src*="random.png"] {
    display: none;
}
img.SameClassForAllIMG[src*="random.png"] + span {
    display: inline-block;
    width: 300px;
    height: 100px;
    background: url(//dummyimage.com/300x100/111/fff&text=new.png) no-repeat left top;
}

<p>Set background-image, and resize it to zero with padding on :hover 
<a href="#nature"><img class="a-img" src="http://lorempixel.com/120/80/nature/1"> 
</a></p>
<p>use a pseudo-element set in absolute position and overflow in a tag :
<a href="#nature3"><img class="a-img" src="http://lorempixel.com/120/80/nature/3">
</a></p>

img {
  vertical-align:middle;
}
[href="#nature"]:hover .a-img {
  height:0;
  width:0;
  padding:40px 60px;
  background:url(http://lorempixel.com/120/80/nature/2);
}
[href="#nature3"] {
  display:inline-block;
  vertical-align:middle;
  position:relative;
  overflow:hidden;
}
[href="#nature3"]:after {
  content:url(http://lorempixel.com/120/80/nature/4);
  vertical-align:top;
  position:absolute;
}
[href="#nature3"]:hover:after {
  left:0;
}