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

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

jQuery中，抢班的形象，并在hover，改变所述text类的opacity为1

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

Answer 2

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

2. 新增CSS改变文本的不透明度：下面
   .text.active { opacity: 0.5; }

Answer 3

如果你想这样做，你用纯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; 
    }