CODEWITHSUNDEEP
csshyperlinkhtml-tablehoverrow
kirby
kirby

Reputation: 4041

Table row CSS link color change not working

I have a table. Each row has a link. When I hover over one of the rows, I would like for the link text to change color, even if I don't directly hover over the letters. The default link text is black. I would like it to change to white. This is my code:

.menurow{
width: 130px;
height: 20px;
cursor: pointer;
}

.menurow:hover{
background-color: orange;
}

.menuLinks{
padding-left: 6px;
width: 130px;
line-height: 20px;
}

.menuLinks:hover{
color: #fff;
}

HTML:

      <table id='menu' cellspacing='0'>
            <tr class='menurow'>
                <td>
                    <a href='#' class='menuLinks'>Settings</a>
                </td>
            <tr>
            <tr class='menurow'>
                <td>
                    <a href='/logout.php' class='menuLinks'>Logout</a>
                </td>
            <tr>
        </table>

Upvotes: 1

Views: 4769

Answers (2)

Indranil
Indranil

Reputation: 2471

For that, do this:

.menurow:hover a{
    background-color: #fff;
}

Basically you're telling all links to be of white color when menurow is hovered over.

Upvotes: 3

James Montagne
James Montagne

Reputation: 78640

If I'm understanding you correctly, you want this:

.menurow:hover .menuLinks{
    color: #fff;
}

Upvotes: 0

Related Questions