關於鼠標懸停淡入嵌入img或目標特定類

Question

是否有可能使用js/jQuery淡入淡出嵌入式圖像而不是div以揭示div背景圖像？我有以下幾個類的多個實例，只想影響所選對象的變化。

e.g：

.image { 
    width: 200px; 
    background-image: url(elements/pattern.png); 
} 

<div class="box"> 
     <div class="image"><img src="pics/001.jpg"/></div> 
     <div class="project">Title</div> 
</div> 



$('.image').mouseover(function() { $(this img).stop().animate({opacity:.7}, 200); }); 
$('.image').mouseout(function() { $(this img).stop().animate({opacity:1}, 600); }); 

此外，是否有可能一個div內解決特定的類？

如：

$('.image').mouseover(function() { $(**this .project**).css({color:'#FFF'}); }); 
$('.image').mouseout(function() { $(**this .project**).css({color:'#999'}); }); 

感謝

....

解決

設法得到它使用的建議find（）方法和包裝圖像工作在一個額外的類。現在圖像淡化和圖像的背景像素圖案融合在一起：

<div class="box"> 
     <div class="image"><div class="p"><img src="pics/001.jpg"/></div></div> 
     <div class="project">Title</div> 
</div> 

$('.box').mouseover(function() { 
    $(this).find('.p').stop().animate({opacity:.3}, 200); 
    $(this).find('.project').css({color:'#FFF'}); 
}); 

$('.box').mouseout(function() { 
    $(this).find('.p').stop().animate({opacity:1}, 600); 
    $(this).find('.project').css({color:'#FFF'}); 
}); 

乾杯！

Answer 1

使用jQuery的內置淡入

$('.image').hover(function() { // on mouseover 
     $(this).stop().fadeTo(200, 0.7); 
    }, function(){     // on mouseout 
     $(this).stop().fadeTo(600, 1); 
    }); 

• jQuery fadeTo()

而且解決一個div特定的項目，你可以使用.find()

$('.box').mouseover(function(){ 
    $(this).find('.image').animate({...}); // will animate .image when you hover .box 
}); 

Answer 2

您可以使用next()：

$('.image').mouseover(function() { $(this).next('.project').css({color:'#FFF'}); }); 

Answer 3

試圖尋找到jQuery選擇的context屬性。

基本上是：

$('.image').mouseover(function() { $('img',this).stop().animate({opacity:.7}, 200); }); 

這將選擇其中的鼠標懸停觸發元素中的img元素。