更改 div 不透明度，不包括某些 div 内容 - jQuery答案

【问题标题】：Changing div opacity excluding some of the div contents - jQuery更改 div 不透明度，不包括某些 div 内容 - jQuery
【发布时间】：2011-04-13 15:43:19
【问题描述】：

我有几个 .box div，包括短文本 () 和缩略图。当 .box 的任何部分悬停时，我正在尝试更改 .box div 中文本的不透明度，但我不希望图像受到影响。到目前为止，我得到了这个：

jQuery(document).ready(function(){
$(".box").fadeTo("fast", 0.6);

$(".box").hover(function(){
$(this).fadeTo("fast", 1.0); 
},function(){
$(this).fadeTo("fast", 0.6);
});
});

我知道它一定很简单，但我被卡住了。感谢您的帮助。

【问题讨论】：

标签： jquery hover opacity

【解决方案1】：

您可以将缩略图图像放在要淡出的框之外，或者使用更精确的选择器，例如 $('.box p')。取决于你是想让盒子装饰本身褪色，还是只是文字。

这也可能有效：

<div class="container">
    <img id="thumbnail" src="" style="float: left; /* or position abosolute"/>
    <div id="box">
        <p>text</p>
    </div>
</div>
<script type="text/javascript">
     $(document).ready(function() {
         // $('.box p').fadeIn('fast'); 
         // or:
         $('.box').fadeIn('fast');
     });
</script>

【讨论】：

【解决方案2】：

使用.find() 获取内部的 以应用淡入淡出，如下所示：

jQuery(function(){
  $(".box p").fadeTo("fast", 0.6);

  $(".box").hover(function(){
    $(this).find("p").fadeTo("fast", 1.0); 
  },function(){
    $(this).find("p").fadeTo("fast", 0.6);
  });
});

这使用$(".box p") 最初只淡化 元素，然后在悬停（整个框）中，我们在里面找到相同的 元素。如果你这样做了$(".box p").hover(...)，那么只有将鼠标悬停在 本身上才会起作用。

【讨论】：

太棒了！这完美无缺。这正是我一直在寻找的。谢谢！

【解决方案3】：

用户$(".box p")选择器

【讨论】：

非常简洁优雅，可惜只有鼠标悬停在p区才有效。