3

私のナビゲーションバーには、次のようなログインと検索用のドロップダウン「フィールドセット」があります。

<div class="nav-button" id="nav-box">
        <a class="inside-link">
            <span id="inside-text">Sign in</span>
        </a>
        <fieldset id="menu-box" class="menu-box">
            <form method="post" id="forms" class="forms" action="checklogin.php">
                <label for="username">Username or email</label>
                <input type="text" id="username" name="username" value="" title="username" tabindex="4">

                <label for="password">Password</label>
                <input type="password" id="password" name="password" value="" title="password" tabindex="5">

                <input type="submit" id="small-btn" value="Sign in" tabindex="6">
                <input type="checkbox" id="remember" name="remember_me" value="1" tabindex="7">
                <label for="remember">Remember me</label>
                <br />
                <a href="#"id="resend_password_link">Forgot your password?</a> 
                <a id='forgot_username_link' title="If you remember your password, try logging in with your email" href="#">Forgot your username?</a> 
            </form>
        </fieldset>
    </div>

ここにフィドルがあります：http://jsfiddle.net/WBrns/5/

「検索」、「ユーザー名」、「パスワード」などの入力ボックスがフォーカスされている間、関連するドロップダウンが消えないようにして、ユーザーが入力中にマウスをドロップダウン内に置く必要がないようにしたいと思います。

CSS の 288 行目は、明らかに機能しない最初の試みでした。私のサイトにはすでに jQuery が含まれているため、任意の js/jquery ソリューションが受け入れられます (純粋な css では不可能だと思うため)

ありがとう！

4

2 に答える 2

0

hoverスタイルで、属性にコマンドがあることを確認してから!important、以下のコードを使用して、IDとクラスを必要なものに置き換えることを忘れないでください。

$("input").focus(function () { that=this;
    $(this).parent(".drop").css("display", "block");

    $(this).blur(function() {
        $(that).parent(".drop").css("display", "none"); 
    });
})

ここで例を見ることができます：http：//jsfiddle.net/WBrns/12/

ユーザーが入力を開始した場合、マウスを離してもドロップダウンが消えないようにする必要があります。ただし、ドロップダウンの外側をクリックすると、非表示になります。

于 2013-03-19T23:41:49.863 に答える