Question

我尝试过.not（）和.parent（）以及其他几种方法，但我无法做到。这是客户端的HTML / CSS所以我无法改变它，也不能使用UI backgroundColor来简化生活。没有插件允许。

我有框中有图像，我需要动画/淡化父div的背景而不影响嵌套元素。

HTML

    <div class="content">
    <img class="rand_ico" rel="33" src="img/rand33.png" />
    <div>Green</div>
    </div>

CSS

.content
{
position:relative;
width:126px;
height:138px;
background: #3C3C3C;
}

.rand_ico
{
margin:10px 0 9px 12px;
height: 90px;
width: 100px;
}

Jquery - 尝试失败

var opacity = 1, toOpacity = 0.6, duration = 250;
  //set opacity ASAP and events
    $("div.content:not(img.rand_ico)").css('content',opacity).hover(function() {
      $(this).fadeTo(duration,toOpacity);
    }, function() {
      $(this).fadeTo(duration,opacity);
    }
  );

Answer 1

如果我错了，请纠正我，但是你不能将img或任何其他标签排除在淡入/淡出之外，因为它是在你应用动画的分区中。一种可能的解决方案是使用rgba为背景颜色设置动画。

Answer 2

我实现这一目标的方法是通过绝对定位将图像叠加在背景上，这样它实际上不是一个孩子，只是共享相同的空间。您还需要确保z-index比您想要的更高。如果你能做到这一点，jquery很简单。不可否认，无法访问实际的html / css是一个很大的烦恼，如果你使用jquery为你实际更改它，它仍然可以完成。

如果你仍然想要完成这个，你可能会使用的一些jquery方法将包括children（），after（）和before（），next（）和prev（），当然可能还有fadeTo（）。< / p>

您不需要jquery专家，只需查看api中的遍历和操作部分http://docs.jquery.com/Main_Page

如何用动画排除子img

2 个答案: