與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>

與上面相同，您也可以在子菜單上應用它。

試試吧。

希望它能幫到你。