html - How to highlight a whole cell when hovering over link -
i have horizontal nav bar highlight entire cell link in when hover on link, however, can immediate area around text highlight. appreciate pointers on how can achieve this.
here js fiddle: http://jsfiddle.net/pykxb/1/
this css code:
#horizontal-style { display: table; width: 100%; margin:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px; } #horizontal-style li { display: table-cell; vertical-align:middle; height:auto; padding:1%; } #horizontal-style a:link { display: block; border: none; text-align: center; margin:auto; padding:none; background:#ebebec; color:#005da4; text-decoration:none; font-family: arial, helvetica, sans-serif; font-weight:bold; font-size:90%; display:inline-block; vertical-align:middle; } #horizontal-style a:visited { display: block; border: none; text-align: center; margin:auto ; padding:none; background: #ebebec; color:#005da4; text-decoration:none; font-family: arial, helvetica, sans-serif; font-weight:bold; font-size:90%; display:inline-block; vertical-align:middle; } #horizontal-style a:hover { display: block; border: none; text-align: center; margin:auto ; padding:none; background: #acce39; color:#005da4; text-decoration:none; font-family: arial, helvetica, sans-serif; font-weight:bold; font-size:90%; display:inline-block; vertical-align:middle; } #horizontal-style a:hover { display: block; border: none; text-align: center; margin:auto ; padding:none; background: #acce39; color:#005da4; text-decoration:none; font-family: arial, helvetica, sans-serif; font-weight:bold; font-size:90%; display:inline-block; vertical-align:middle; }
this html code:
<ul id="horizontal-style"> <li><a href=# >home</a></li> <li><a href=# >about us</a></li> <li><a href=# >online<br />courses</a></li> <li><a href=# >registration</a></li> <li><a href=# >faculty</a></li> <li><a href=# >calendar</a></li> <li><a href=# >store</a></li> <li><a href=# >testimonials</a></li> <li><a href=# >online<br/>lectures</a></li> <li><a href=# >contact us</a></li> <li><a href=# >forum</a></li> </ul>
this works fine, have here
#horizontal-style li { display: table-cell; vertical-align:middle; height:auto; padding:1%; background:#ebebec; } #horizontal-style li:hover{ background-color:#acce39; }
Comments
Post a Comment