How to highlight a whole cell when hovering over link


Tags: html,css,hyperlink,highlight,css-tables

Problem :

I have a horizontal nav bar where I would like to highlight the entire cell the link is in when I hover over the link, however, I can only get the immediate area around the text to highlight. I would greatly appreciate any pointers on how I can achieve this.

Here is my JS Fiddle: http://jsfiddle.net/PYKXb/1/

This is my 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 is my 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>


Solution :

This works fine, have a look here

#horizontal-style li {
    display: table-cell;
    vertical-align:middle;
    height:auto;
    padding:1%;
    background:#ebebec;
}
#horizontal-style li:hover{
    background-color:#acce39;
}

    CSS Howto..

    how to horizontally center a div of 10000px (wider than full screen) in CSS?

    How to target CSS link with JavaScript

    How to concatenate XHTML files in Java resolving any possible CSS conflicts?

    CSS sprite - showing part of another image when zooming

    How to center vertical inside header?

    How to load only html from web pages in selenium

    Getting the title of a picture overlayed onto the picture of a slideshow

    Track cursor hover position and show hide menu similar to OSX dock / Windows start bar

    How to change active link color in bootstrap css?

    How to add CSS files for different platform devices? [closed]

    How to apply this effect to the last line of a text?

    HTML CSS How to swap css attributes

    How to force a hover state with jQuery?

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    CSS: how to create responsive irregular shapes

    Show only small portion of an image [closed]

    Making dijit.Dialog Transparent when it shows up

    drawing a image like shown

    How to style a randomly generated list of items in Javascript

    sunken border when background-color css specified - how to avoid?

    How to get all images(overlapping allowed) in one line using css?

    How to create square image thumbnails using only CSS

    In jQuery how do I make multiple changes to css in a function?

    How to overlay a play button over a YouTube thumbnail image

    How to load external css in CakePHP?

    Letters appear out of the comment box in php site after comment is added. How to limit the shown letters per line?

    In css how to display multiple divs?

    Meteor: how to style useraccounts

    How to make CSS zig-zag borders? [duplicate]

    How to structure css using BEM methodology for adaptive web pages?