While hovering over my h4 tag in the table, everything functions correctly. However, when I hover over the strong tag inside the h4 element, the strong tag inherits the same hover effect as the h4 tag.
The structure of each td element within the table is as follows:
<td>
<a>
<div>
<h4>
...<strong>...</strong>...
</h4>
</div>
</a>
</td>
Below is the CSS affecting the elements in the table.
h4 {
font-weight: 100;
margin: 0px;
padding: 12px 0px;
color: black;
}
a {
text-decoration: none;
}
strong :hover {
background: none !important;
background-color: transparent !important;
}
/* Hover gradient effect on background */
.itemTrue > a > div :hover {
color: white;
background: #e4e4e4;
/* Gradient generation code goes here */
}
I am attempting to maintain a blank background for the strong tag while displaying the gradient background for the div/h4 tag during hover.
Everything works flawlessly when there is no hover interaction.