我想一次悬停在背景和文字颜色上

Question

我需要一次悬停在背景和文字颜色上..请告诉我怎么能这样做...当我悬停时，我想改变文字颜色和背景..我应该应用哪个属性< / p>

这是我的代码和图片。

http://s29.postimg.org/i0ivezr07/image.jpg

.menu{
	height:65px;
	width:100%;
	background-color:#cccc99;
	box-shadow:0px 1px 2px #000000;
	-moz-box-shadow: 0px 1px 2px #000000;
	-webkit-box-shadow: 0px 1px 2px #000000;
}
.logo{
	float:left;
	margin: 5px 6px;
	position:relative;
}
.menu-text{
	float:right;
	width:570px;
	margin: -8px 0px;
}
.menu-text ul{
	list-style:none;
}
.menu-text ul li{
	float:left;
	height:60px;
	width:94px;
	line-height: 60px;
	border-right:1px solid #e6e6e6;
	text-align: center;
	font-size:16px;
	font-weight:bold;
	text-shadow: 0px 1px 2px #757575;
}
.menu-text ul li:hover{

}
.menu-text ul li:last-child{
	border:none;
}
.menu-text ul li a{
	text-decoration:none;
	color: #333333;
}
.menu-text ul li a:hover{

}
.menu-text ul li a:hover ul li:hover{
	background-color:#FFF;
	color:#FFF;
	}
.menu-belt{
	width:100%;
	height:10px;
	background:#cccc99;
	box-shadow:0px -1px 2px #a9a9a9;
	-webkit-box-shadow: 0px -1px 2px #a9a9a9;
	-moz-box-shadow: 0px -1px 2px #a9a9a9;
	float:left;
	margin: -13px 0;
}

<div class="menu">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="logo" />
</a>
</div> <!--/logo-->
<div class="menu-text">
<ul>
   <li><a href="#"> Home</a></li>
   <li><a href="#"> Operator</a></li>
   <li><a href="#"> Drive </a></li>
   <li><a href="#"> Booking </a></li>
   <li><a href="#"> Rider </a></li>
   <li><a href="#"> Logout </a></li>
</ul>
</div> <!--/menu-text-->
<div class="menu-belt">
</div> <!--menu-belt-->
</div> <!--/menu-->

Answer 1

只需将其添加到：hover

即可

.menu-text ul li a:hover{
    color: red;
    background-color: green;
}

：hover是鼠标悬停在元素上时使用的css。

Answer 2

使用：CSS的悬停属性

语法：

classname：hover {property1：value; property2：值;）

＆＃13;

＆＃13;

.menu{
	height:65px;
	width:100%;
	background-color:#cccc99;
	box-shadow:0px 1px 2px #000000;
	-moz-box-shadow: 0px 1px 2px #000000;
	-webkit-box-shadow: 0px 1px 2px #000000;
}


.item1
{
  display:block;
  border:1px solid #000;
  width:60px;
  padding:10px;
}

.item1:hover
{
  
  background:lightgreen;
  color:white;
  }

＆＃13;

<div class="menu">
  <span class="item1">MENU</span>
  </div>

＆＃13;

＆＃13;

＆＃13;

CSS语法 classname：hover {color：green;背景：红色;}

Answer 3

您还必须通过添加display：block;

使a-tag填充整个周围的li元素

.menu{
	height:65px;
	width:100%;
	background-color:#cccc99;
	box-shadow:0px 1px 2px #000000;
	-moz-box-shadow: 0px 1px 2px #000000;
	-webkit-box-shadow: 0px 1px 2px #000000;
}
.logo{
	float:left;
	margin: 5px 6px;
	position:relative;
}
.menu-text{
	float:right;
	width:570px;
	margin: -8px 0px;
}
.menu-text ul{
	list-style:none;
}
.menu-text ul li{
	float:left;
	height:60px;
	width:94px;
	line-height: 60px;
	border-right:1px solid #e6e6e6;
	text-align: center;
	font-size:16px;
	font-weight:bold;
	text-shadow: 0px 1px 2px #757575;
}
.menu-text ul li:hover{

}
.menu-text ul li:last-child{
	border:none;
}
.menu-text ul li a{
	text-decoration:none;
	color: #333333;
    display: block; //this makes the a tag fill out the whole surrounding li
}
.menu-text ul li a:hover{
    background-color: red; //add this of course....
    color: green;
}
.menu-text ul li a:hover ul li:hover{
	background-color:#FFF;
	color:#FFF;
	}
.menu-belt{
	width:100%;
	height:10px;
	background:#cccc99;
	box-shadow:0px -1px 2px #a9a9a9;
	-webkit-box-shadow: 0px -1px 2px #a9a9a9;
	-moz-box-shadow: 0px -1px 2px #a9a9a9;
	float:left;
	margin: -13px 0;
}

<div class="menu">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="logo" />
</a>
</div> <!--/logo-->
<div class="menu-text">
<ul>
   <li><a href="#"> Home</a></li>
   <li><a href="#"> Operator</a></li>
   <li><a href="#"> Drive </a></li>
   <li><a href="#"> Booking </a></li>
   <li><a href="#"> Rider </a></li>
   <li><a href="#"> Logout </a></li>
</ul>
</div> <!--/menu-text-->
<div class="menu-belt">
</div> <!--menu-belt-->
</div> <!--/menu-->