как навести курсор на определенный класс изображения

Question

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, также пробовал класс, но это не работает

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