CSS mouseover highlight table hyperlink

Question

I am using CSS3 hover effect and facing a problem about that for an element.

The problem is about when I point the mouse at one th (using hover), the color of th hyperlink the same of the background, so I need to make it change on that event.

Here a live example:

.maps-btn tr {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.maps-btn tr:hover {
    background-color: blue;
    color: white;
}
.maps-btn a:hover {
    color: white;
}

<div class="col-md-9">
    <div class="row">
        <table class="table table-bordered table_class maps-btn">
            <thead>
                <tr>
                    <th>1111</th>
                    <th>2222</th>
                    <th>3333</th>
                    <th>4444</th>
                    <th>5555</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="#">AAAA</a></td>
                    <td>BBBB</td>
                    <td>CCCC</td>
                    <td>DDDD</td>
                    <td>EEEE</td>
                </tr>
                <tr>
                    <td><a href="#">FFFF</a></td>
                    <td>GGGG</td>
                    <td>HHHH</td>
                    <td>IIII</td>
                    <td>JJJJ</td>
                </tr>
            </tbody>
        </table>
    </div> 
</div>

And i wanna disable hover on thead. I wanna use hover on tbody.

Answer 1

You could do like this:

.maps-btn tr {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.maps-btn a {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.maps-btn tr:hover {
    background-color: blue;
    color: white;
}

.maps-btn tr:hover a {
    background-color: blue;
    color: white;
}
.maps-btn a:hover  {
    color: white;
}

<div class="col-md-9">
    <div class="row">
        <table class="table table-bordered table_class maps-btn">
            <thead>
                <tr>
                    <th>1111</th>
                    <th>2222</th>
                    <th>3333</th>
                    <th>4444</th>
                    <th>5555</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="#">AAAA</a></td>
                    <td>BBBB</td>
                    <td>CCCC</td>
                    <td>DDDD</td>
                    <td>EEEE</td>
                </tr>
                <tr>
                    <td><a href="#">FFFF</a></td>
                    <td>GGGG</td>
                    <td>HHHH</td>
                    <td>IIII</td>
                    <td>JJJJ</td>
                </tr>
            </tbody>
        </table>
    </div> 
</div>