Question

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>

Answer 1

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.