2

私は単純なjcarouselを使用しています。ここにコードがあります：http：//jsfiddle.net/w6fLA/

「li」にカーソルを合わせると、txtでdivボックスを表示しようとしていますが、非表示のオーバーフローで要素が非表示になります。ボックスの上部をすべて表示するにはどうすればよいですか。

これが私のjsです：

$('.jcarousel-skin-tango li').hover(
    function(){
        $(this).append($("<div class='box'><p>" + $(this).find('img').attr('alt') + "</p></div>").hide().fadeIn(300));
    },

    function(){
        $('.box').fadeOut(300, function() { $(this).remove();});
    }
);
4

2 に答える 2

1

カルーセルの実装方法では、ツールチップを内部に挿入することでそれを行うことができません。

オプションとして、レベルを「position：absolute」としてレベルに挿入し、マウス座標でその位置を制御します。

于 2012-04-04T16:56:51.363 に答える
1

これにはまだ多少の調整が必要ですが、ツールチップを内部要素に追加する代わりに、ボディに適用します。次にoffset、画像 jQuery オブジェクトの top プロパティと left プロパティを使用して配置します。CSSも一部変更しました。

http://jsfiddle.net/w6fLA/1/

$('.jcarousel-skin-tango li').hover(
    function(){
        var $img = $(this).find('img');
        $('body')
            .append($("<div class='box'><p>" + $img
            .attr('alt') + "</p></div>")
            .hide()
            .fadeIn(300)
            .css('top', $img.offset().top + 60)
            .css('left', $img.offset().left + 30));
    },

    function(){
        $('.box').fadeOut(300, function() { $(this).remove();});
    }
);
​
于 2012-04-04T17:07:58.493 に答える