1

リンクがクリックされたときに何かを動かそうとしています。私はそれらを一緒に働かせることができないようです。誰でもその方法を知っています。

CSS

#drop:focus #login_dropdown {
    margin-top: 0;
}
#login_dropdown {
    width: 100%;
    height: 80px;
    background-color: #ccc;
    margin-top: -80px;
}

HTML

<div id="login_dropdown" class="clearfix">
    <div class="container">
        <div id="login_dropdown_header">
             <h1>Login</h1>

        </div>
        <form action="login.php" method="post" id="login_form" class="clearfix">
            <ul id="login_reg">
                <li>
                    <input type="text" name="username" placeholder="Username">
                </li>
                <li>
                    <input type="password" name="password" placeholder="Password">
                </li>
                <li>
                    <input type="submit" value="Login">
                </li>
                <li> <a href="register.php">Register</a>

                </li>
            </ul>
        </form>
    </div>
</div>
<header class="header">
    <div class="container">
        <div id="logo"></div>
        <nav>
            <ul> <a href="index.php"><li>Home</li></a>
 <a href="ledge_base.php"><li>Knowledge Base</li></a>
 <a href="faq.php"><li>FAQ</li></a>

                <!--<a href="#"><li>Teach</li></a>--> <a href="contact.php"><li>Contact</li></a>
 <a href="#"><li id="drop">Login/Register</li></a>

            </ul>
        </nav>
    </div>
</header>

とにかく、クリックした#login_dropdownときにマージンを0に変更しようとしています。#dropしかし、それをクリックしても何も起こりません。誰かが私を助けることができますか？

4

1 に答える 1

0 
#drop:focus #login_dropdown {
    margin-top: 0;
}

そのCSSを見ると、あなたのロジックは「#dropフォーカスがいつ、margin-topゼロに設定されているか#login_dropdown」ということです

問題は#login_dropdownの子孫ではなく#drop、アセンダントです。現在、CSS にはアセンダント セレクターがないため、これを実現するには JavaScript (または jQuery) を使用する必要があります。

CSS セレクター レベル 4 仕様に記載されていますが、詳細情報: http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/およびhttps://stackoverflow .com/a/1014958/497604

于 2013-04-16T04:13:25.700 に答える