ボタンがホバリングせず、位置合わせが中央にない

Question

小さなナビゲーションバーがあり、このコンテナにボタンを中央に配置したい。私はまたマウスでそれらを入力すると、ホバー効果が欲しいです。

どういうわけか、アライメントとホバー効果が働いていないので、私はフローティングの代わりにフレックスを使用しています。だから、私は、ボタンのコンテナを中央に配置し、ボタンをカラーエフェクトで移動させたい。

ありがとうございます！

は、ここでは、複数のクラスを渡したい場合は、唯一つの属性class="YourClassName"を使用して、クラス名を渡すフィドル

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    transition: 0.5s; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn" class="navBtn">New Folder</button> 
 
     <button class="btn" class="navBtn">New File</button> 
 
     <button class="btn" class="navBtn">Delete</button> 
 
     </div> 
 
     <div> 
 
     navContent 
 
     </div> 
 
    </div>

Answer 1

ファーストスニペット：

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content:center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    transition: 0.5s; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
    <div id="btnBar"> 
 
    <button class="btn navBtn">New Folder</button> 
 
    <button class="btn navBtn">New File</button> 
 
    <button class="btn navBtn">Delete</button> 
 
    </div> 
 
    <div> 
 
    navContent 
 
    </div> 
 
</div>

Answer 2

です。

class="btn" class="navBtn" This is wrong. Do somthing like class="btn navBtn"

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    transition: 0.5s; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn navBtn">New Folder</button> 
 
     <button class="btn navBtn">New File</button> 
 
     <button class="btn navBtn">Delete</button> 
 
     </div> 
 
     <div> 
 
     navContent 
 
     </div> 
 
    </div>

Answer 3

使用justify-content: center;あなたが複数のクラスの使用を使用したい場合は要素のフレックスcontainer.andを思い出してくれるの使用のみ、単一のクラス属性内の項目を中央にclass="btn navBtn"

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
    justify-content: center; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition:all 0.5s linear; 
 
} 
 

 

 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn navBtn">New Folder</button> 
 
     <button class="btn navBtn" >New File</button> 
 
     <button class="btn navBtn" >Delete</button> 
 
     </div> 
 
     <div> 
 
     navContent 
 
     </div> 
 
    </div>

Answer 4

このような単一の要素には、「クラス」属性が1つだけあります。あなたが表示したいの変更を記述する必要があり.btn:hoverで

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    transition: 0.5s; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn navBtn">New Folder</button> 
 
     <button class="btn navBtn">New File</button> 
 
     <button class="btn navBtn">Delete</button> 
 
     </div> 
 
     <div> 
 
     navContent 
 
     </div> 
 
    </div>

Answer 5

：

はこれを試してみてください

を削除します。また、flexboxディスプレイを使用して内容を正当化することもできます。あなたは1クラス属性class="btn navBtn"

内のすべてのクラスを使用すると、あなたが参照してくださいコード

フレックスコンテナに justify-content:center;を使用する必要がフレックスアイテムを中心に必要

#navBar { 
 
    height: 100px; 
 
    width: 100%; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 

 
#btnBar { 
 
    height: 40px; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    color: blue; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn" class="navBtn">New Folder</button> 
 
     <button class="btn" class="navBtn">New File</button> 
 
     <button class="btn" class="navBtn">Delete</button> 
 
     </div> 
 
     <div> 
 
     <p>navContent<p> 
 
     </div> 
 
    </div>