Question

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

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

目前，我有2个div（蓝色和红色），并且只能使用提供的jQuery处理红色。如何为多个div工作？

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

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

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

如果有人可以指导我从哪里开始那将会很棒。

由于

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

Answer 1

使用多个选择器

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

Demo Fiddle

Answer 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/

Answer 3

你可以这样做

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

将show / hide类div应用于具有不同内容的每个div

3 个答案: