javascript - 在鼠标悬停时淡化嵌入的 img 或目标特定类

Question

是否可以使用 js/jQuery 淡化嵌入图像而不是 div 以显示 div 背景图像？我有以下类的多个实例，只想影响对所选类的更改。

例如:

.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() 并将图像包装在一个额外的类中，设法让它工作。现在图像淡出并且 .image 的背景像素图案混合通过:

<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()

还可以使用 .find() 解决 div 中的特定元素

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