html - I want to put hover on background and text color at a time -
i need put hover @ time on background , text color.. please tell me how this...when hover, want change text color , background .. property should apply
here code , image.
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-->
just add on :hover
.menu-text ul li a:hover{ color: red; background-color: green; } :hover css used when mouse if hovering on element.
Comments
Post a Comment