更改 div 不透明度，排除某些 div 内容 - jQuery

发布于 2024-09-24 00:46:06 字数 367 浏览 4 评论 0原文

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

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

原文

I have several .box div including short text () and a thumbnail. I'm trying to change opacity of text within a .box div when any part of the .box is hovered, but I don't want the image affected. So far I've got this:

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

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

I know it must be quite simple, but I'm stuck. Thanks for help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

栖迟 2024-10-01 00:46:06

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

回复收藏 0 原文

还如梦归 2024-10-01 00:46:06

使用 .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(...) ，则仅将鼠标悬停在

本身上即可。

Use .find() to get just the  inside to apply fade to, like this:

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

This uses $(".box p") to only fade the  elements initially, then in the hover (for the entire box) we're finding the same  elements inside. If you did $(".box p").hover(...) only hovering on the  itself would work.

回复收藏 0 原文

寄人书 2024-10-01 00:46:06

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

You could probably place the thumbnail image outside the box you're trying to fade or use a more precise selector like $('.box p'). Depends if you want to have the box decoration itself fade, or just the text.

this might also work:

<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>

回复收藏 0 原文

~没有更多了~