使用 CSS 更改悬停时的文本

Question

我正在尝试使用CSS（elementor pro）将鼠标悬停在图像上时更改文本。 我正在制作看起来像颜色样本的东西，当将鼠标悬停在产品的另一种颜色上时，它会将其上方的文本更改为光标悬停在其上的颜色，并在不将鼠标悬停在其上时将其更改回正常文本.

我现在遇到的问题是悬停的半径太大，扩展到整个容器，而不仅仅是小图像/样本。

谢谢！

我添加了此 CSS 代码，并将类：文本添加到我希望文本显示的容器中。

.text:before {
    content: "Kies je kleur: Gun Metal";
    font-weight: bold;
}

.text:hover::before {
    content: "Kies je kleur: Rosé Gold";
}

Answer 1

.container{
  display: flex;
  gap: 20px;
}
.img-wrapper:before{
  content: 'img 1'
}
.img-wrapper:hover:before{
  content: 'new'
}

<div class="container">
  <div class="img-wrapper">
    <img src="https://images.unsplash.com/photo-1693572774544-bbca04f96800?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" height="50px" width="50px" />
  </div>
   <div class="img-wrapper">

    <img src="https://images.unsplash.com/photo-1693572774544-bbca04f96800?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" height="50px" width="50px" />
  </div>
   <div class="img-wrapper">

    <img src="https://images.unsplash.com/photo-1693572774544-bbca04f96800?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" height="50px" width="50px" />
  </div>
</div>