如何悬停图片 class 具体

Question

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

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

上面的场景工作正常，但我在同一个列表中有多个 img 并且想要悬停，我必须选择 class 特定的。

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 也试过 class 具体的但是它不起作用

Answer 1

答案如下：

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")
}

如何悬停图片 class 具体

how to hover the image class specific

html

css

angular7