html - cssでボタンの背景に色を付ける

Question

現在、ナビゲーション バーを作成しており、現在、メニューのオプションごとに 3 つの画像を使用しています。css を使用して、非選択時、ホバー時、および選択時に基づいて画像を置き換えています。html と css を使用して、実際の単語 (つまり、ホーム、注文、機能など) を強調表示する方法しか知りませんでした。選択したときにボックス全体に色を付ける方法がわかりませんでした。

画像ファイルを使わずに html/css でこれを行う方法はありますか?

Answer 1

提供される情報はほとんどありませんが、それでも最も一般的な方法を想定してみます。

基本的なulメニューli構成では、次のようになります。

<ul>

    <li>

        <a href="#">Link Text</a>

    </li>

</ul>

すべてのメニューを囲むボックスは、単に

ul {
    /* Styles */
}

メニュー項目 (おそらくあなたが求めているもの) を囲むボックスは、ul > li

ul > li {   
    /* Style */
    background-color: red;
}

ul li { ... }注:より一般的な方法にも使用できます。

一方、リンク自体はによって選択されますul > li a

ul > li a {
    /* Style */
}

あなたのケースでこれを実装してみてください。

Answer 2

colorとの組み合わせを使用して、この効果を実現できるはずbackground-colorです。

Answer 3

デモ

......................... こんにちは、このように簡単にこれを行います

CSS

    ul{
list-style:none;
  width:200px;
  padding:0;
  margin:0;
  background:green;
}
ul li{
display:block;
  background:pink;
  margin:3px;
}
a:hover{
background:red;
}
a{
text-decoration:none;
  display:block;
  padding:0 30px;
  line-height:35px;
  position:relative;
}
.shope{
padding-left:60px;
}
.shope:hover{
background:none;
}
.shope:after{
content:'';
  position:absolute;
  left:10px;
  top:8px;
  width:30px;
  height:20px;
  background:lightgreen;
}
.shope:before{
content:'';
  position:absolute;
  right:20px;
  top:8px;
  width:30px;
  height:20px;
  background:darkred;
}

html

    <ul>
  <li><a href="#">home</a></li>
  <li><a href="#">home</a></li>
  <li><a href="#">home</a></li>
  <li><a href="#">home</a></li>
  <li><a href="#">home</a></li>
  <li><a href="#" class="shope">my cart 1</a></li>

</ul>

ライブデモ

Answer 4

ホバー時にさまざまな色のメニューを表示する

あなたのcssを次のようにしてください：

div.home:hover{
color: #4C787E;
}
div.aboutus:hover{
color: #616D7E;
}
div.contact:hover{
color: #808000;
}

html は次のようになります。

<div id="menu">
<ul>
<li class="menu1"><div class="home"><a href="#">home</a></div>
</li>
<li class="menu2"><div class="aboutus"><a href="...">about us</a></div></li>
<li class="menu3"><div class="contact"><a href="...">contact</a></div></li>
</ul>
</div>

上記と同じように、サブメニューにも適用できます。

それを試してみてください。

お役に立てば幸いです。