将显示/隐藏类 div 应用于具有不同内容的每个 div

Posted 2023-05-08

【中文标题】将显示/隐藏类 div 应用于具有不同内容的每个 div

【英文标题】：Applying a show/hide class div to every div with different content

【发布时间】：2013-07-02 15:03:52

【问题描述】：

这可能是一个简单的问题，但在尝试了一些方法后，我需要一些建议。

我有一些 div，当您将鼠标悬停在它们上面时，会显示另一个 div（就像工具提示一样），每个 div 具有不同的内容。我提供的 jsFiddle 在红色 div 上显示了一个示例。我试图通过 jQuery 实现的目标是当您将鼠标悬停在任何其他显示 div 内容的 div 上时。

目前，我有 2 个 div（蓝色和红色），只能通过提供的 jQuery 使其与红色一起使用。这如何适用于多个 div？

我本来可以很容易地使用工具提示插件，但是我在花药插件中使用了这个示例，它们与滑块内的工具提示冲突非常严重。

http://jsfiddle.net/DeRx8/1/

 $('.red').hover(function () 
        $(".tooltip").fadeIn(250);
    , function () 
        $(".tooltip").fadeOut(250);
    );

如果有人能指导我从哪里开始，那就太好了。

谢谢

PS * 我将有超过 10 个 div 红色、蓝色、粉色、绿色等。

【问题讨论】：

你不能给它们都加一个通用的类吗？像 class="red showtip", class="blue showtip", class="pink showtip" 然后任何 $(this).next() 函数都可以工作，您可以根据需要添加更多颜色

【参考方案1】：

带多重选择器

$(document).ready(function () 
    $('.red, .blue').hover(function () 
        $(".tooltip").fadeIn(250);
    , function () 
        $(".tooltip").fadeOut(250);
    );
);

Demo Fiddle

【讨论】：

这很好，但两个 div 都显示“蓝色框信息”，而不是带有红色信息的红色 div 和带有蓝色信息的蓝色 :) 你的演示确实有意义！

您可以通过 $(this).. 获取选择器。在此基础上，您可以显示您确切需要的位置。

那么有没有办法为此编写代码？：jsfiddle.net/DeRx8/4 感谢各位的回复

【参考方案2】：

你可以这样做

$(document).ready(function () 
    $('.red,.blue').hover(function ()         
        $(this).next(".tooltip").fadeToggle(250);
    );
);

http://jsfiddle.net/Sq5nP/

如果您想通过 css 定位工具提示，您可以使用 + 相邻选择器，前提是您的工具提示将始终是下一个兄弟

.red+.tooltip 
    display:none;
    background-color:#993;
    width:50px;
    height:50px;
    position:absolute;
    right:60px;
    top:40px;

.blue+.tooltip 
    display:none;
    background-color:blue;
    width:50px;
    height:50px;
    position:absolute;
    right:170px;
    top:10px;

http://jsfiddle.net/yyrp7/

【参考方案3】：

你可以的

$(document).ready(function () 
$('.red,.blue').hover(function () 
    $(this).next(".tooltip").fadeIn(250);
, function () 
    $(this).next(".tooltip").fadeOut(250);
);
);    

http://jsfiddle.net/DeRx8/3/ 更新

$(document).ready(function () 
$('.red,.blue').hover(function () 
    var left=$(this).offset().left+$(this).width()-40;
    $(this).next(".tooltip").css("left",left).fadeIn(250);
, function () 
    $(this).next(".tooltip").fadeOut(250);
);
);    

位置 .tooltiphttp://jsfiddle.net/DeRx8/5/

【讨论】：

您的答案是正确的，但是在查看了代码后我可能需要对其进行更改，您看到我需要将蓝色工具提示悬停 div 放置在它旁边，因此这意味着设置不同的工具箱类？跨度>

你有绝对位置，所以所有的.tooltip都有相同的位置，你可以改变html或用jQuery设置位置

@user2212564 如果它们始终是下一个兄弟jsfiddle.net/yyrp7

，则可以使用相邻选择器通过 css 执行此操作

ᾠῗᵲᄐᶌ 你的例子就是我所追求的，如果你把它放在帖子中而不是评论我可以勾选它:) 其他人的答案也很棒+1