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中的特定类？

e.g：

$('.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()

另外，为了解决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元素。

在mouseover上淡化嵌入的img或目标特定类

3 个答案: