定位特定的 div答案

【问题标题】：Targeting Specific Divs定位特定的 div
【发布时间】：2012-09-23 08:18:55
【问题描述】：

好的，我想弄清楚如何使用 jQuery 来确定当前选择了哪个 div、突出显示等，然后将代码应用于该 div。

例如，我将三个divs 排成一排。每个div 都有一个class 或.box。在每个div 中都有另一个div，其类为.overlay。默认情况下.overlay 设置为display: none;，但是当我将鼠标滚动到每个div 上时，我想覆盖那个div 只是为了设置为可见 - 所有其他divs 覆盖应该保留隐。

看看，http://jsfiddle.net/j76s2/

当鼠标滑过divs 时，我有 JS 来显示叠加层，但只要您将鼠标滑过任何 div，它就会显示所有叠加层。我知道为什么会发生这种情况，但我无法解决的是如何让代码工作，当div 将鼠标悬停在它上面时，应该只显示第一个div 的叠加层等等。

【问题讨论】：

标签： jquery html targeting

【解决方案1】：

您可以使用.hover() 事件，该事件有两个功能，一个用于悬停，一个用于悬停。然后，您可以使用this 作为当前悬停的.box 元素的上下文以在其中找到.overlay，然后使用.hide() 和.show() 来更改它的可见性。

$(".box").hover(
    function(){$(this).find(".overlay").show()},
    function(){$(this).find(".overlay").hide()}
);

工作演示：http://jsfiddle.net/jfriend00/wa5Bn/

您也可以像这样使用fadeIn() 和fadeOut()：

$(".box").hover(
    function(){$(this).find(".overlay").stop(true, true).fadeIn(500)},
    function(){$(this).find(".overlay").stop(true, true).fadeOut(500)}
);

工作演示：http://jsfiddle.net/jfriend00/4qeqm/

【讨论】：

我添加了一个fadeIn()/fadeOut() 选项。

【解决方案2】：

您只需要使用this 引用特定元素：

$(".box").mouseover(function(){
    $(".overlay", this).css({"display" : "block"});
});

$(".box").mouseleave(function(){
    $(".overlay", this).css({"display" : "none"});
});

这样，您将选择范围缩小到包含在悬停元素内的 .box 元素。

另外，请考虑使用.hide() 和.show() 而不是.css()。

【讨论】：

@moonwave99 感谢您的帮助。为什么建议使用 .hide() 和 .show() 而不是 .css()？
@user1563944 字符更少，更有意义。

【解决方案3】：

您正在使用 .overlay 类更改所有元素的 CSS。要仅影响您当前鼠标悬停的那个，您应该使用$(this) 选择当前元素，然后使用find() 定位其中包含的类。

$(".box").mouseover(function(){
    $(this).find(".overlay").css({"display" : "block"});
});

$(".box").mouseleave(function(){
    $(this).find(".overlay").css({"display" : "none"});
});

【讨论】：