2

ピザのメニューがあり、ユーザーがカーソルをパイの 1 つに合わせると、そのパイに関する情報がその上の div に表示されます。これまでのところうまくいきましたが、癖があります。

マウスを .infotrigger の上にすばやく移動すると、.iteminfo が表示されず、mouseleave が起動されず、.iteminfo が表示されたままになります。これは望ましくありません。

ここで遊ぶことができます。

Jクエリ:

$(function() {

        $('.infotrigger').mouseenter(function () {
            $(this).children('.iteminfo').show(100);
        });

        $('.iteminfo').mouseleave(function () {
            $(this).fadeOut(200);
        });

    });

私は解決策を何週間も探して近づいてきましたが、「これ」のトリガーが邪魔になるという私の認識された必要性にいつも戻ってくるようです. メニューのすべての項目に同じクラスを使用しているため、children ハンドラーを使用しました。それがなければ、メニューのすべてのピザの情報がポップアップ表示されます。最初にリストを試してみましたが、機能させることができなかったようです。これについてもっとエレガントな方法があれば、私はすべて目です。HTML を構造化した方法が、私が達成しようとしていることに対する最大の障害であるかどうか疑問に思っています。

HTML:

<div class="menuitem">
    <div class="infotrigger">
        <div class="iteminfo"></div>
    </div>
</div>

CSS:

.menuitem {
width:144px;
height:200px;
float:left;
position:relative;
display:block;
font-size:1.2em;
letter-spacing:.05em;
margin-left:2em;
z-index:5;
}

.menuitem p {
margin-bottom:0;
}

.menuitem img {
}

.infotrigger {
margin-bottom:-14px;
height:120px;
overflow:visible;
}

.iteminfo {
position:relative;
display:none;

width:238px;
/*height:168px;*/
margin:-140px auto 0 -47px;
text-align:left;
font-size:0.8em;
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
letter-spacing:0;
color:rgb(110,48,21);
border-right:1px solid rgba(0,0,0,0.2);
border-bottom:1px solid rgba(0,0,0,0.25);
-moz-border-radius:4px;
border-radius:4px;
-moz-box-shadow:1px 1px 10px rgba(0,0,0,0.5);
-webkit-box-shadow:1px 1px 10px rgba(0,0,0,0.5);
box-shadow:1px 1px 32px rgba(0,0,0,0.5);
background-image: linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -o-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -moz-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -ms-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(224,201,174)),
color-stop(1, rgb(254,245,224))
);
z-index:100;
}

.iteminfo img {
margin:0 0;
width:238px;
height:56px;
}

.iteminfo p {
text-align:left;
margin:0.7em 0.2em 0.5em 0.5em;
}

.fb-like {
margin:0.5em auto 0.5em 0.5em;
}

助けてくれてありがとう。これがWeb開発を試みるデザイナーの姿です。

4

3 に答える 3

0

多くのことができるかどうかはわかりませんが、バックアップ計画を作成しない場合は、いくつかのストップを追加してみてください:

$('.infotrigger').mouseenter(function () {
    $(this).children('.iteminfo').stop(true, true).show(100);
});

$('.iteminfo').mouseleave(function () {
    $(this).stop(true, true).fadeOut(200);
});

バックアップ計画は良い考えではありませんが、よりローカルなスコープを持つものに変更してみてください:

$(document).on('mousemove', function(e) {
    if ($(".iteminfo").is(':visible') && e.target.className != 'iteminfo') {
        $(".iteminfo").hide(); //could use a timeout aswell
    }
});

おそらく最善の解決策は、次のようにすることです。

$('.infotrigger').mouseenter(function () {
    var elm = $(this).children('.iteminfo');
    $('.iteminfo').not(elm).fadeOut(200);
    elm.show(100);
});

$('.iteminfo').mouseleave(function () {
    $(this).fadeOut(200);
});
于 2012-05-06T21:33:35.443 に答える
0

hoverイベントを単にバインドするのはinfotriggerどうですか？

$('.infotrigger').hover(function() {
    $(this).children('.iteminfo').show(100);
}, function() {
    $(this).children('.iteminfo').fadeOut(200);
});​

私はテストしました、それはうまくいきます;）

于 2012-05-06T21:35:06.387 に答える
0

CSS
純粋な CSS ではないのはなぜですか? http://jsfiddle.net/mqchen/QFJz7/

ホバー時に情報を表示するだけで、css3 アニメーションをサポートするブラウザーの場合、情報はフェード インします。

Javascript
これは、少し冗長な昔ながらの JavaScript ソリューションです: http://jsfiddle.net/mqchen/Sbg7g/3/

マウスがどの「ピザ」を離れても、基本的に他のすべてを非表示にします。jsfiddle をチェックしてください。JavaScript の部分だけを考慮する必要があります。

var triggers = $(".infotrigger");
var infos = $(".infotrigger .iteminfo");

$(triggers).each(function(index, trigger) {
    $(trigger).mouseenter(function(e) {
        $(infos).each(function(i2, info) {
            if(index === i2) {
                $(info).fadeIn(100);
            }
        });
    });

    $(trigger).mouseleave(function(e) {
        $(infos).each(function(i2, info) {
            $(info).fadeOut(200);
        });
    });
});
于 2012-05-06T21:36:12.043 に答える