ホバーでdivを制御する方法：

Question

私は、ホバー上でメニューオプションの背景色を変更する方法を見つけました。しかし、オプションをホバーすると、他のすべてのオプションを右に移動する広いスペースが必要になります。一貫性のあるスペースを維持したいので、色分けしてください。オプションは右に移動します。 Facebookにはメニューオプションがあります。以下は

コードです：

<div id="menu"> 
    <a href="/hello" id="option">home</a> 
    <a href="/hello" id="option">profile</a> 
    <a href="/hello" id="option">account</a> 
    <a href="/hello" id="option">settings</a> 
    <a href="/hello" id="option">extra</a> 
    <a href="/hello" id="option">logout</a> 
    </div> 

はCSS：

div#menu { 
    margin-left: 630px; 
    margin-top:-20px; 
    } 
    option { 
    margin-left: 20px; 
    } 
    #option:hover{ 
    background: #3F2327; 
    padding: 10px; 
    } 

Answer 1

要素の周りにpadding: 10px;

スペースを削除するスペースを取り、あなたがスペースをしたくない場合は、ドン」それを加えなさい。あなたはそれをすべての時間をしたい場合は、だけではなく、また:hover

---

のためにそれをすべての時間を追加し、あなたの問題に関係のない、ちょうど良いプラクティス：

• あなたはdoesnのブラウザを使用している場合CSSをサポートしていない、オフになっている、グラフィックではない、ホームプロフィールのアカウント設定の余分なログアウト - あなたはリンクのリストを持っています。list markupを使用してください。 guidance on making it prettyがたくさんあります。
• idはユニークである必要があります。特定の要素を識別するためにのみ使用してください。一群の要素がすべて同じクラスのメンバーであると述べる場合は、class属性を使用します。 HTML elementsと同じクラスとid名を使用して
• 避けが、それだけでコードが

Answer 2

1）あなたは「オプション」に＃が欠落しているの混乱を作る

2）なぜあなたはホバーに水増しされています？あなたがその上にマウスを置くと、動きが発生します。