悬停图像时更改文本不透明度

Question

嗨，我想在悬停图像时更改文本不透明度。 我尝试使用它，但它不起作用：

HTML：

<div class="text">
        SOME TEXT
    </div>

<img src="image1.jpg" class="first-image">

CSS：

.text {
opacity: 0;
}

.first-image:hover {
text.opacity: 1;
}

Answer 1

如果您想按照使用纯 CSS 的方式进行操作，请修改以下代码段：

<dic class="first-image">
 <img src="image1.jpg" alt="first-image"/>
 <div class="text">SOME TEXT</div>
</div>

..

.text {
   opacity: 0;
  }

  .first-image:hover > div{
     opacity: 1;
   }

Answer 2

在 jquery 中，抓取图像的类，并在hover ，将text类的opacity更改为 1。

 $('.first-image').hover(function(){
  $('.text').css('opacity', '1');
 });

Answer 3

1. 使用 jQuery 侦听图像上的 mouseenter 事件。 当该事件被触发时，向<div class="text">元素添加一个类（如active ），使其看起来像<div class="text active"> 。 在 mouseenter 事件（mouseleave）退出时，确保移除active类。 或者您可以直接通过 jQuery 修改 css。

2. 添加 css 以更改文本不透明度：
   .text.active { opacity: 0.5; }