使用 jQuery 更改不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6274495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Opacity with jQuery
提问by Ian
I have 9 items on a grid, I want all items to have 0.5 opacity on every item and only when hovered over should the div/item and everything inside have 1.0 opacicty.
我在网格上有 9 个项目，我希望所有项目在每个项目上的不透明度为 0.5，并且只有当鼠标悬停在 div/item 和里面的所有内容时才具有 1.0 的不透明度。
Here is the JS
这是JS
$('.gallery-single').css({ opacity: 0.5 });
$('.gallery-single a').mouseover(function(){
$('.gallery-single-title', this).css('display', 'block');
$('.gallery-single', this).css({ opacity: 1 });
});
$('.gallery-single a').mouseout(function(){
$('.gallery-single-title', this).css('display', 'none');
$('.gallery-single', this).css({ opacity: 0.5 });
});
HTML
HTML
<div class="gallery-single">
<a href="#" title="">
<div class="gallery-single-title hide">Some text goes here</div>
<div class="gallery-single-img"><img src="http://img.youtube.com/vi/code/0.jpg" width="300" height="200" /></div>
</a>
</div>
All items are at opacity 0.5 when loaded but opacities are not changed when focused. What am I doing wrong here?
加载时所有项目的不透明度为 0.5，但聚焦时不透明度不会改变。我在这里做错了什么？
采纳答案by David Tang
The problem is that .gallery-singleis an ancestorof the anchor (i.e. it's outside the anchor). The $(selector, this)format looks for the selector withinthis. Instead, use .closest():
问题是它.gallery-single是锚的祖先（即它在锚之外）。该$(selector, this)格式在this. 相反，使用.closest()：
$(this).closest('.gallery-single').css(...);
Sidenote: jQuery gives this warning about mouseover(also applies to mouseout):
旁注：jQuery 给出了关于mouseover（也适用于mouseout）的警告：
This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.
由于事件冒泡，这种事件类型可能会导致许多头痛。例如，在本例中，当鼠标指针移动到 Inner 元素上时，鼠标悬停事件将被发送到该元素，然后向上传递到 Outer。这可能会在不合时宜的时候触发我们绑定的鼠标悬停处理程序。请参阅有关 .mouseenter() 的讨论以获得有用的替代方法。
You should use mouseenter(and mouseleave) instead (or the hover()function which conveniently combines the two).
您应该使用mouseenter(and mouseleave) 代替（或hover()方便地将两者结合起来的函数）。
回答by Michael Robinson
Try this:
尝试这个：
$('.gallery-single a').hover(function(){
$(this).closest('.gallery-single-title').css('display', 'block');
$(this).closest('.gallery-single').css({ opacity: 1 });
},
function(){
$(this).closest('.gallery-single-title').css('display', 'none');
$(this).closest('.gallery-single').css({ opacity: 0.5 });
});
工作示例。
