css rollover links

Discussion in 'CSS' started by ptah, Jul 5, 2005.

0
  1. #1
    i would like to create a rollover for links such that the background and border of the cells in which they are change, when "hovered over". the css i used is;

    #rightNav a:link, #rightNav a:visited
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000066;
    text-decoration: none;
    height: 20px;
    width: 200px;
    top: 200px;
    margin: 0px;
    padding: 0px;
    }
    #rightNav a:hover
    {
    text-decoration: none;
    width: 200px;
    background-color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    }

    how do i get the effect to work for the whole cell, not just the link text?
     
    ptah, Jul 5, 2005 IP
  2. tresman

    tresman Well-Known Member

    Messages:
    235
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    138
    #2
    Hi,

    Give them all a fixed with and height (you haven't do that in the hover) and add a display:block to all of them. This should work, I think, but please post if not. Thsi is a really quick reply.
     
    tresman, Jul 5, 2005 IP
  3. Pady_flyer

    Pady_flyer Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    tresman sugested right direction, here is working example of class wich you should include in a table tag:
    table.menu a {
    width:110px;
    height: 15px;
    border:1px solid #6699cc;
    background: transparent;
    display: block;
    padding: 2px;
    text-decoration:none;
    font-size:11px;
    line-height:12px;
    font-family: Ariel, verdana, sans-serif;
    }
    table.menu a:link {
    background: transparent;
    border:1px solid ##6699cc;
    }

    table.menu a:active {
    background: transparent;
    border:1px solid #6699cc;
    }

    table.menu a:visited {
    background: transparent;
    border:1px solid #6699cc;
    }

    table.menu a:hover {
    background: #CED3D6;
    border:1px dashed ##6699cc;
    }

    fell free to experiment and play with a code :)
     
    Pady_flyer, Jul 8, 2005 IP