0

シナリオ: ul、li のリスト内に 2 つのリンクがある: MY INFO と LOG IN リンク上で HOVER を使用すると、1 つのリンクがボックス (fadeIn アニメーション付き) を表示する必要があります。他のリンクでは、リンクにカーソルを合わせると、ボックス内にボタンが表示されます (フェードイン アニメーション付き)。

ユーザーがリンク「ログイン」をマウスアウトするか、フォームをマウスアウトすると、フォームはフェードアウトする必要があります。ボタンのあるボックスは、ユーザーがリンク「MY INFO」をマウスアウトするか、ボックスをマウスアウトしたときにフェードアウトする必要があります。

問題 (どちらも同じ): MOUSEOUT で MY INFO をリンクすると、フォームが消えます。MOUSEOUT リンクで LOG IN すると div 内のボタンが消えます。

注: 1/マウスがリンク上またはフォーム上にある場合、フォームが表示されている必要があります。

参照: 画面の一番上にある www.conforama.fr を確認してください。リンクはアイコン付きの「Compte」で、クラスは「with-hover-menu」です。マウスオーバーするとフォームが表示されます。リンクまたはフォームをマウスアウトすると、フォームが消えます。同じことが必要ですが、フェードインが必要です。

現在、この jsfiddle で以下のコードを見ることができます: http://jsfiddle.net/75HYL/19/しかし、まったく機能しません。これを達成する方法がわかりません。理解したい、学びたい…!!

<ul class="links">
    <li class="classA"><a><span>My info</span></a></li>
    <li class="classB"><a><span>Log in</span></a></li>
</ul>

<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE<br/>
    <input type ="button" value="OKAY"/>
    <div id="login" >
        <div class="form">
            <form>
                <input type="textfield" value="enter your email"></input>
                <input type="checkbox"><option>remember me? </option><input>
                <input type="button" value="Click me"/>
            </form>
        </div>
    </div>
</div>
<style>
    .links li { display:inline-block;cursor:pointer; }
    .links li { padding:0 4px 0 1px; }
    .links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classA span {}
    .links li.classB span {}
    .links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    .links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    #login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
    #userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
</style>

<script>
    $("li.classA").hover(function() {
        $("#userInfo").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#userInfo").fadeOut('fast').css('display', 'none');
    });

    $("li.classB").hover(function() {
        $("#login").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#login").fadeOut('fast').css('display', 'none');
    });
</script>
4

5 に答える 5

1

このようなビットですか？いくつかの構文エラーをクリーンアップし、ロジックを少し変更

于 2012-06-11T11:37:33.197 に答える
1

これはあなたが望むものですか？

http://jsfiddle.net/WcUFe/3/

違いを見やすくするために、js のみを変更しました。より簡単にするには、cssand/または html を変更する必要があります。すべてのコードは、ショー全体を制御する別のプラグインに入れることができます。

基本的に、タイマーを使用して、ユーザーがマウスを LI 要素から表示されているコンテナーに移動できるように、約 100 ミリ秒かかります。状態を維持し、2 つのコンテナーが常に表示されないようにするための残りの部分はすべて面倒です。 .

于 2012-06-11T11:47:23.307 に答える
0

さてあなたの問題は、マウスがボックスに到達するためにあなたのリンクを残さなければならないということです。したがって、上記のように機能を動作させるには、ボックスが消える必要があります。

いくつかの解決策が思い浮かびます（私はjQueryが得意ではないので、より良いオプションがあるかもしれません）。1は、ブール値と、ボックスが開いたかどうかを示すロジックを追加し、（リンクとボックスではなく）ボックスのmouseoutイベントのみをリッスンすることです。もう1つは、イベントをデバウンスして、リンクのmouseoutイベントをリッスンする前に少し時間遅延があるようにすることです。

  • @AbstractChaosがこれをクリアしたようです。私の提案には、より良いオプションがあると思ったからです。

お役に立てれば。

于 2012-06-11T11:41:09.837 に答える
0

また

$("li.classA").hover(function() {
    $("#login").css('display', 'none');
    $("#userInfo").fadeIn('fast');
});
$("#userInfo").mouseleave(function() {
    $("#userInfo").fadeOut('fast');
});


$("li.classB").hover(function() {
    $("#userInfo").css('display', 'none');
    $("#login").fadeIn('fast');
});
$("#login").mouseleave(function() {
    $("#login").fadeOut('fast');
});
于 2012-06-11T11:41:21.483 に答える
0

これを試してください： http://jsfiddle.net/QR49h/

<li>div を要素内に非表示/表示するように移動しました。

<ul class="links">
    <li class="classA"><a><span>My info</span></a>
        <div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE
            <br/>
            <input type="button" value="OKAY" />
        </div>
    </li>
    <li class="classB"><a><span>Log in</span></a>
        <div id="login">
            <div class="form">
                <form>
                    <input type="textfield" value="enter your email" />
                    <input type="checkbox" />
                    <option>remember me?</option>
                        <input />
                    <input type="button" value="Click me" />
                </form>
            </div>
        </div>
    </li>
</ul>

また、js (ClassA と ClassB) のバグを修正し、css を少しいじって<li>、最初の項目が展開されたときに 2 番目の項目がその位置を維持できるようにしました。ああ、フォーム div のいくつかの要素を閉じる問題を修正しました。

于 2014-02-26T16:24:11.543 に答える