-1

演示

我正在使用 jquery 为我的网站创建一个固定样式的工具提示，如下所示

$('.roll1, .roll2, .roll3').hide();
    //one
    $('#rollover .one').hover(function(e){
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $('.roll1').height() - 50;
        $('.roll1').show().offset({left: thisleft, top: thistop});                             
    }, function(){
        $('.roll1').hide();
    });
    //two
    $('#rollover .two').hover(function(e){
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $('.roll2').height() - 50;
        $('.roll2').show().offset({left: thisleft, top: thistop});                             
    }, function(){
        $('.roll2').hide();
    });
    //three
    $('#rollover .three').hover(function(e){
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $('.roll3').height() - 50;
        $('.roll3').show().offset({left: thisleft, top: thistop});                             
    }, function(){
        $('.roll3').hide();
    });

由于我是 jquery 的初学者，我已经管理了三个功能中的一、二和三，但它可以在一个功能块中进行管理，例如使用以下或任何其他想法

$('#rollover .one, #rollover .two, #rollover .three').hover(function(e){

}

但我被这条线卡住了

var thistop = ....... $('.roll1').height() // this one

我怎样才能做到这一点？

如果你认为我应该为此定义这样的东西

var thissel = $(this).children();

我没有像上面那样搜索，因为roll1, roll2, roll3可能在文档中的任何地方

4

3 回答 3

1 
$('#roll1, #roll2, #roll3').hover(function(e){
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $(this).height() - 50;
        $(this).show().offset({left: thisleft, top: thistop});                             
    }, function(){
        $(this).hide();
    });
于 2013-09-26T09:36:43.877 回答
0

工作演示

尝试这个

  $('.roll1, .roll2, .roll3').hide();
    $('#rollover .one,.two,.three').hover(function(e){
        var chld=$(this).attr('class');
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $('#'+chld).height() - 50;
        $('#'+chld).show().offset({left: thisleft, top: thistop});                             
    }, function(){
         var chld=$(this).attr('class');
        $('#'+chld).hide();
    });

html

<div id="rollover" class="cf">
            <div class="one">
                one
                <div class="roll1" id='one'>one hover</div>

            </div>
            <div class="two">
            two
                <div class="roll2" id='two' >two hover</div>
            </div>
            <div class="three">
            three
                <div class="roll3" id='three'>three hover</div>
            </div>
        </div>
于 2013-09-26T09:54:23.800 回答
0

试试这个：- http://jsfiddle.net/aiioo7/Q5Yba/1/

JS：-

$('.roll1, .roll2, .roll3').hide();
var element;
$('#rollover .one, #rollover .two, #rollover .three').hover(function (e) {
    var thisleft = $(this).offset().left;
    element=$(this).find("[class*=roll]");
    var thistop = $(this).offset().top - $(this).height() + $(element).height() - 50;
    $(element).show().offset({
        left: thisleft,
        top: thistop
    });
}, function () {
    $(element).hide();
});
于 2013-09-26T09:40:34.133 回答