0

矢印にカーソルを合わせると、jcarouselで上下にスクロールするアイテムのリストがあります。アイテムのリストには、リンクする必要のあるリンクがあります。

私のアイテムのリスト

これが私が達成したいことです。カーソルが色付きの領域にあるとすぐにリストがスクロールするように、矢印のホバー領域を拡張する必要があります。これは、矢印のサイズ（絶対位置）を変更してリストの一番上に配置するだけで簡単に実現できますが、矢印コンテナが矢印の一番上にあるため、リンクを機能させることができないという問題があります。

ホバーエリア

編集：私はフィドルを作るつもりでしたが、jcarouselではうまくいかなかったようです。これは私がこれまでに持っているものです：

ウェブサイトへのリンク

4

2 に答える 2

1

お気づきのとおり、問題は、重なり合う要素がマウスイベントを食べているため、実際のリスト項目をホバー/クリックできないなどです.

mouseoverリスト要素のコンテナーで使用して、マウスがその上半分または下半分にあるかどうかを確認できます..

私のワーキングテストは

var state = '';
$('div.listaterm').mousemove(function(e){
    var self = $(this),
        position = self.offset(),
        height = self.outerHeight(),
        mouse = e.pageY-position.top,
        inTopHalf = mouse <= (height/2),
        sign = inTopHalf ? '-' : '+';

    if (sign != state){
        state = sign;
        jQuery('.jcarouselcall').jcarouselAutoscroll('stop');
        jQuery('.jcarouselcall').jcarouselAutoscroll({'target': sign+'=1'});
        jQuery('.jcarouselcall').jcarouselAutoscroll('start');
    }
}).mouseout(function(e){
    if (!$(this).find(e.relatedTarget).length && !(e.relatedTarget == this)){
        state='';
        jQuery('.jcarouselcall').jcarouselAutoscroll('stop');
    }
});

ただし、矢印要素が要素と重ならないようにする必要がありますdiv.listaterm。もちろん、矢印からホバー ハンドラーも削除します。

于 2012-12-28T19:10:50.870 に答える
0

プラグインの HTML コードは次のようになります。

<a href="#" class="startscroll"><img style="margin-top:60px" src="http://gestyre.com/new/wp-content/themes/gestyre/images/down.png" alt="arriba"></a>

<a href="#" class="stopscroll"><img alt="arriba" src="http://gestyre.com/new/wp-content/themes/gestyre/images/up.png"></a>

CSS:

スタイルシートにcssを追加する必要があります

.startscroll img
{
   margin-top:60px; // it shifting the down arrow image to the border side
}

213行目: http://gestyre.com/new/wp-content/themes/gestyre/css/app.css

.startscroll, .stopscroll {
    border: 1px solid red;
    height: 157px;
    position: absolute;
}

上記のCSSを適用した後、火のバグを使用してデモ用に赤い色の境界線を作成した下の画像を参照してください。

ここに画像の説明を入力

于 2012-12-28T18:34:08.597 に答える