I am currently in the process of developing a website, and for the header section, I have decided to use a table format where each column represents a different section. The top row will feature a picture link, while the bottom row will display the name of the section (although they are not yet functional as links). A simplified version of my table structure looks like this:
<table>
<tr>
<td style="width: 100px; max-height: 100px" id="header-games-button"><img src="header-games.png" class="header-icon block"></td>
</tr>
<tr>
<td id="header-games-text" class="headermidrow">Games</td>
</tr>
</table>
Here is the CSS code for the header section:
.header-icon{
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
.block{
display: block;
}
.headermidrow{
height: 20px;
}
#header-games-button{
background-color: #fca93e;
-webkit-transition: background-color .2s;
transition: background-color .2s;
}
#header-games-button:hover{
background-color: #fc8e00;
}
#header-games-text{
background-color: white;
color: #fca93e;
text-align: center;
-webkit-transition: color .2s;
transition: color .2s;
}
#header-games-text:hover{
color:#fc8e00;
}
My main goal is to enable hover effects on both the icon and the text link simultaneously, triggering their respective color transitions. I have attempted various CSS and jQuery methods but haven't had success so far.
If possible, I prefer a solution using only CSS, but I am open to JavaScript/jQuery if it proves to be more effective. Additionally, I am willing to redesign this part of the website if it simplifies the implementation process.
Any suggestions or guidance would be greatly appreciated.