このコードはかなり単純で、アクティブなとき(マウスをクリックしたとき)にHTML5のボタン要素のmargin-topを1pxに設定する必要があります。しかし、私が得たのは、めちゃくちゃなレイアウトです。ボタンは、隣り合っている両方のボタンに対してのみ実行する必要があることを実行するからです。このエラーが発生する原因を教えてください。
これはサンプルのHTMLコードです(jsfiddleにリンクすることはできないため)が、jsfiddleへのリンクは一番下にあります
<header id="main_header"> <!-- this is your header with logo, menu, login and get started now buttons -->
<div id="header_accent"></div> <!-- small accent image, barely seen on top of the page -->
<div id="header_holder"> <!-- this guy centers the header to the middle of the page's width -->
<img src="images/logo.png" alt="ssl8.com" id="logo"/> <!-- logo image -->
<div id="nav_holder"> <!-- positions the navigation and buttons -->
<nav>
<ul> <!-- navigation -->
<li class="active"><a href="#">prices</a></li>
<li><a href="#">features</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
<button class="login">login</button> <!-- login button -->
<button class="getStartedNow">Get started now</button> <!-- get started now button -->
</div>
<div id="header_shadow"></div> <!-- holds the background shadow for the header (in CSS file) -->
</div>
</header> <!-- END of header -->
これがjsfiddleです。不足している写真などは無視してください。オレンジ色のボタンをクリックするだけで、私が話していることがわかります。
ありがとうございました