html - 用css在按钮背景中着色

Question

我正在构建我的导航栏，目前我正在为菜单上的每个选项使用 3 个图像。我正在使用 css 根据未选择、悬停和选择的时间替换图像。使用 html 和 css，我只知道如何突出显示实际的单词（即 home、order、它是如何工作的......），我无法找到一种在选中时为整个框着色的方法。

有没有办法在不使用图像文件的情况下使用 html/css 来做到这一点？

Answer 1

在悬停时有不同颜色的菜单

有你的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>

与上述相同，您也可以将其应用于子菜单。

试试看。

希望它可以帮助你。

Answer 2

演示

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

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 3

提供的信息很少，但我仍然会尝试假设最一般的方式。

在基本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 4

应该可以使用color和的组合来实现此效果background-color。