与css的按钮背景中的颜色

Question

I'm building my navigation bar and I currently am using 3 images for each option on the menu. I'm using css to replace the images based on when its non-selected, hovered, and selected. Using html and css, i only knew how to highlight the actual words (ie home, order, how it works...), i couldn't figure out a way to color in the whole box when selected.

Is there a way to do this with html/css without using image files?

Answer 1

So little information provided but still I will try assuming the most general way.

In a basic ul and li menu structure, like the following.

<ul>

    <li>

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

    </li>

</ul>

The box surrounding all the menus are selected by simply

ul {
    /* Styles */
}

The box surrounding a menu item ( probably what you are asking ) is selected by ul > li

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

Note: You can also use ul li { ... } for more general way.

Where as, link itself is selected by ul > li a

ul > li a {
    /* Style */
}

Try to implement this on your case.

Answer 2

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

Answer 3

Demo

........................... Hi now do this easily as like this

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

to have different colors of menus on hover

have your css something like this:

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

and html goes like this:

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

same as above you can apply it on the sub-menus also.

Try it.

Hope it helps you.