CODEWITHSUNDEEP
htmlcss
Frank G.
Frank G.

Reputation: 1579

Target a Hyper Link and a Table Together

I am trying to figure out how I can target a Table cell (TR > TD) and a Hyper Link together inside one row.

Example HTML:

<div class="CourseLayout">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="30" valign="middle"><a href="mylink">Test Link</a></td></tr>
</table>
</div>

CSS:

.CourseLayout tr:hover td, a:hover{
 background-color: #F1B242;
 color: #0C1A31;
 }

I want a user to be able to roll over a row and highlight that row and also change the font color of that row together. Could someone please tell me what I am doing wrong?

Upvotes: 0

Views: 28

Answers (1)

Fahad Hasan
Fahad Hasan

Reputation: 10506

You're targeting the hyperlink using a:hover which means that it's color will change only when somebody would place their cursor over the hyperlink but not the table. This is how you should target the hyperlink when somebody places their cursor on the table:

.CourseLayout tr:hover td {
 background-color: #F1B242;
 }

.CourseLayout tr:hover td a {
 color: #0C1A31;
 }


.CourseLayout tr:hover td {
  background-color: #F1B242;
}
.CourseLayout tr:hover td a {
  color: red;
}
<div class="CourseLayout">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="30" valign="middle"><a href="mylink">Test Link</a>
      </td>
    </tr>
  </table>
</div>

DEMO

Upvotes: 2

Related Questions