1

だから私はこの奇妙な問題を抱えています。

アイテムにカーソルを合わせている間、ナビゲーションの後ろにリボンが移動しています。これには、リボンの形状を描画するための古い css-corner トリックが含まれています。これらは負のボトム プロパティによって配置されます。奇妙なことに、.mouseenter イベントは「this」に「overflow:none」クラスを追加しているようです。これを防ぐ方法はありますか？

2 つ目の質問は、hoverIntent のように、マウスが通り過ぎるだけで .mouseenter が起動しないようにするにはどうすればよいかということです。私は mouseenter がそれをしていると思っていましたが、どうやらそうではありませんでした。

これをより短く、より良くする方法に関するヒントも大歓迎です。コードは次のとおりです。noConflict スクリプトを実行しているため、「j」は $ に変換されます。

function rbHover(){


    j("#nav li a")
        .on('mouseenter', function() {

        var l = j(this).parent().position().left;
        var w = j(this).parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

            j("#ribbon").stop('ribbon', true, true).animate({
                "left" : l,
                "width" : w }, {
                    duration: 600,
                    easing: 'swing', 
                    queue: 'ribbon'
                 }).dequeue('ribbon');

            j(".rib-left").stop('rib-left', true, true).animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'swing', 
                    queue: 'rib-left'
                 }).dequeue('rib-left');

            j(".rib-right").stop('rib-right', true, true).animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'swing', 
                    queue: 'rib-right'
                 }).dequeue('rib-right');
        })

        .on('mouseleave', function() {

        var l = j(".active").parent().position().left;
        var w = j(".active").parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

            j("#ribbon").stop('ribbon', true).delay(300, 'ribbon').animate({
                "left" : l,
                "width" : w }, {
                    duration: 600,
                    easing: 'swing', 
                    queue: 'ribbon'
                 }).dequeue('ribbon');

            j(".rib-left").stop('rib-left', true, true).delay(300, 'rib-left').animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'swing', 
                    queue: 'rib-left'
                 }).dequeue('rib-left');

            j(".rib-right").stop('rib-right', true, true).delay(300, 'rib-right').animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'swing', 
                    queue: 'rib-right'
                 }).dequeue('rib-right');
        });
}

私のウェブサイトはここにあります: http://www.egegorgulu.com

4

1 に答える 1

2

それが.mouseenter()原因で が設定されるのではなく、イベントoverflow:hiddenに応答して何をするかです。mouseenterつまり、.animate()呼び出し。正直なところ、jQuery がこの css プロパティを設定する理由はわかりませんが、次の方法で解決できると確信しています。

  1. 背景色を指定するのではなく#ribbon、背景色を持つ子を追加し<div>ます
  2. これを行う#ribbonと、リボンの高さ全体 (つまり、三角形の部分を含む) の高さを作成できます。そうすれば、overflow:hiddenそれらの三角形の部分を切り取ることはありません。

「hoverIntent」のアイデアに関しては、おそらくこの問題に対処するスクリプトがいくつかあります。ただし、実際にはその質問に対して 2 番目の質問を投稿する必要があります。ここの各投稿には、1 つの質問のみを含める必要があります。

于 2012-02-01T15:32:38.013 に答える