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

【问题标题】：Change text opacity when hovering a image悬停图像时更改文本不透明度
【发布时间】：2015-12-23 15:07:29
【问题描述】：

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

HTML：

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

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

CSS：

.text {
opacity: 0;
}

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

【问题讨论】：

【解决方案1】：

如果你想像使用纯 CSS 那样做，修改下面的 sn-p：

<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;
   }

【讨论】：

【解决方案2】：

使用 jQuery 监听图像上的 mouseenter 事件。当该事件被触发时，向<div class="text"> 元素添加一个类（如active），使其看起来像<div class="text active">。在 mouseenter 事件 (mouseleave) 退出时，确保删除 active 类。或者你可以直接通过jQuery修改css。
添加 css 以更改文本不透明度：
.text.active { opacity: 0.5; }

【讨论】：

【解决方案3】：

在jquery中，抓取图片的类，在hover上，将text类的opacity改为1。

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

【讨论】：