使用css的按钮背景颜色

Question

我正在构建我的导航栏，目前我对菜单上的每个选项都使用了3张图片。我使用css来替换基于未选中、悬停和选中的图像。使用html和css，我只知道如何突出显示实际的单词(例如，主页、订单、如何工作……)，我不能想出一种方法来在选中时在整个框中着色。

有没有一种不用图片文件就能用html/css做到这一点的方法呢？

​

​

Answer 1

提供的信息如此之少，但我仍然会尝试采用最通用的方式。

在基本的ul和li菜单结构中，如下所示。

<ul>

    <li>

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

    </li>

</ul>

所有菜单周围的框都可以通过以下方式选择

ul {
    /* Styles */
}

菜单项(可能是 what you are asking)周围的框由ul > li选择

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

注意:您也可以使用ul li { ... }来获取更通用的方法。

其中，as表示链接本身由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>