Question

我有几个.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);
});
});

我知道这一定很简单，但我被困住了。谢谢你的帮助。

Answer 1

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

Answer 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(...) {h}只悬停在本身就行了。

Answer 3

您可以将缩略图放在要尝试淡出的框之外，或者使用更精确的选择器，例如$（'。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>

更改div不透明度，不包括一些div内容 - jQuery

3 个答案: