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

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上，将opacity类的text更改为1.

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

Answer 3

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

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