html - 如何将鼠标悬停在特定的图像类上

img:hover {
  content: url("https://img.tineye.com/result/2aface83405d2b9582aa88c4f1684fc505aed67c1cdcbd158e34f0fcb23060cc?size=160")
}

<img src="https://img.tineye.com/result/2aface83405d2b9582aa88c4f1684fc505aed67c1cdcbd158e34f0fcb23060cc?size=160" />

上面的方案工作正常，但是我在同一列表中有多个img，并且希望将其悬停，因此我必须针对特定的类。

img:hover .apple {
  content: url("https://img.tineye.com/result/2aface83405d2b9582aa88c4f1684fc505aed67c1cdcbd158e34f0fcb23060cc?size=160")
}

img:hover .mango {
  content: url("https://img.tineye.com/result/2aface83405d2b9582aa88c4f1684fc505aed67c1cdcbd158e34f0fcb23060cc?size=160")
}

<img class="apple" src="https://img.tineye.com/result/2aface83405d2b9582aa88c4f1684fc505aed67c1cdcbd158e34f0fcb23060cc?size=160" />
<img class="mango" src="https://img.tineye.com/result/2aface83405d2b9582aa88c4f1684fc505aed67c1cdcbd158e34f0fcb23060cc?size=160" />

我尝试了上述sceanrio也尝试了特定的类，但它不起作用

最佳答案

答案如下：

img.apple:hover  {
  content: url("https://img.tineye.com/result/2aface83405d2b9582aa88c4f1684fc505aed67c1cdcbd158e34f0fcb23060cc?size=160")
}

img.mango:hover  {
  content: url("https://img.tineye.com/result/2aface83405d2b9582aa88c4f1684fc505aed67c1cdcbd158e34f0fcb23060cc?size=160")
}

关于html - 如何将鼠标悬停在特定的图像类上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56963623/