懸停圖像時更改文本不透明度

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