与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

的 Demo 的

........................... 嗨，现在就像这样轻松地做到这一点

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

的 Live demo 的

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>

与上述相同，您也可以在子菜单上应用它。

试试吧。

希望它对你有所帮助。