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

这可能是一个简单的问题，但尝试几个方法后，我需要一些建议。将显示/隐藏类div应用于每个不同内容的div

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

目前，我有2个div（蓝色和红色），只能让它与jQuery提供的红色一起工作。这将如何为多个div工作？

我会很容易地使用一个工具提示插件，但是我在这个插件中使用了这个例子，它们与滑块内的工具提示冲突很糟糕。

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

如果有人能指导我从哪里开始，这将是巨大的。

感谢

PS *我将有超过10 div的红色，BLUC，粉红色，绿色等..

来源

2013-07-04 user2212564

你不能添加普通类所有的人？类似于class =“red showtip”，class =“blue showtip”，class =“pink showtip”，然后任何$（this）.next（）函数都可以工作，并且可以根据需要添加更多颜色 – pathfinder

如果您想要放置日你可以做到这一点

$(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/

来源

2013-07-04 14:50:34

随着多种选择

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

Demo Fiddle

来源

2013-07-04 14:46:47

这很棒，但是两个div都显示'蓝色盒子信息'，而不是红色的红色信息，蓝色的蓝色信息:)你的演示确实有意义！ – user2212564

您可以通过$（this）获得选择器..基于此，您可以显示您确切需要的位置。 –

那么，有没有简短的方式来编写代码？：http://jsfiddle.net/DeRx8/4/谢谢你的回应球员 – user2212564

可以做

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

http://jsfiddle.net/DeRx8/3/
UPDATE

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

位置.tooltip
http://jsfiddle.net/DeRx8/5/

来源

2013-07-04 14:48:33

你的回答是正确的，但看了代码后，我可能不得不改变它，你看到我需要蓝色工具提示悬停div放在旁边，所以它意味着造型不同的工具箱类？ – user2212564

你有位置绝对所以.tooltip所有位置相同，你可以改变HTML或设置位置与jQuery –

@ user2212564你可以做到这一点，通过CSS使用相邻的选择器，如果他们总是下一个兄弟http：// jsfiddle.net/yyrp7/ –

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

回答

相关问题