0

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

我有一些 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 红色、蓝色、粉色、绿色等。

4

3 回答 3

3

带多个选择器

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

演示小提琴

于 2013-07-04T14:46:47.733 回答
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/

于 2013-07-04T14:50:34.407 回答
2

你可以做 

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

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

于 2013-07-04T14:48:33.347 回答