1

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

干杯！

4

3 回答 3

2

使用 jQuery 内置的淡入淡出

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

此外，要解决 div 中的特定项目，您可以使用.find()

$('.box').mouseover(function(){
  $(this).find('.image').animate({...}); // will animate .image when you hover .box
});
于 2013-05-06T14:52:29.670 回答
0

您可以使用next()：

$('.image').mouseover(function() {  $(this).next('.project').css({color:'#FFF'}); });
于 2013-05-06T14:47:20.133 回答
0

尝试查看 jQuery 选择器的context属性。

基本上：

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

这将选择触发鼠标悬停的元素内的 img 元素。

于 2013-05-06T14:52:28.307 回答