2

3 つの画像スライダーがあるページがあります。スライダーの左部分にカーソルを合わせると、左方向を示す矢印が表示され、マウスが置き換えられます。そして、スライダーの右部分にカーソルを合わせると、右方向を示す矢印が表示され、マウスが置き換えられます。また、これらの矢印はフェード インとフェード アウトを行ったり来たりします (そのため、css カーソル プロパティではなく jQuery を使用しています)。

私はそれをすべてやりましたが、問題は、マウスがスライダーを左から右下にのみ終了すると、マウスを別の方向に移動するまで矢印が消えないことです。

だからここに私のコードがあります.最初はHTML部分です:

<div id="arrow-prev" class="arrow">
<img id="cursorimg_prev" src="style/arrow-left.png" />
</div>

<div id="arrow-next" class="arrow">
<img id="cursorimg_next" src="style/arrow-right.png" />
</div>

CSS:

.arrow
{
height: 585px;
width: 750px;
position: absolute;
top: 0px;
}

#arrow-prev
{
left: 0px;
cursor: none;
width:50%;
}

#arrow-next
{
right: 0px;
cursor:none;
width:50%;
}

#cursorimg_prev,
#cursorimg_next
{
position: absolute;
display: none;
z-index: 99;
}

そしてjQueryの部分：

$('#arrow-prev').mousemove(function(event) {
            var position = $('.slider_conteneur').position();
            var x = event.pageX - position.left - 0;
            var y = event.pageY - position.top - 0;
            $('#cursorimg_prev').css({ top: y+"px", left: x+"px" });
        });

        $('#arrow-prev').hover(function() {
            $('#cursorimg_prev').stop().fadeIn(100);
        }, function(){
            $('#cursorimg_prev').stop().fadeOut(100);
        });

        $('#arrow-next').mousemove(function(event) {
        var position = $('.slider_conteneur').position();
        var position2 = $('#arrow-next').position();

        var x = event.pageX - position.left - position2.left;
        var y = event.pageY - position.top - position2.top;
        $('#cursorimg_next').css({ top: y+"px", left: x+"px" });
        });

        $('#arrow-next').hover(function() {
            $('#cursorimg_next').stop().fadeIn(100);
        }, function(){
            $('#cursorimg_next').stop().fadeOut(100);
        });

誰かが助けてくれることを願っています!

4

1 に答える 1

1

あなたのエラーは、.arrow div でホバーを使用して見ていることだと思います。これらはそれぞれ可視領域の半分を作ります。ホバー効果は、マウスがdivの領域を離れるまで表示されます

私はいくつかのものを変更し（主にコンテナのサイズを調整するためのcss、これは複数の方法で行うことができます）、それをjsfiddleにアップロードしました（持っていない画像を代替テキストに置き換えますが、同じ目的を果たすはずです）、また、多くのエラーを引き起こしているマウス移動イベントも削除しました。

あなたの質問を正しく理解できたと思います

http://jsfiddle.net/fESVm/

    .arrow
     {
     height: 585px;
     width: 28px;
     position: absolute;
     margin-right:182px;
     top: 0px;
     }
于 2013-03-09T14:26:26.287 に答える