Within a table, I have the following HTML code:
<td id="decllink"><a href="#">Decline</a></td>
In the CSS file, there are styling rules applied to the above code:
#decllink {white-space:nowrap;padding:2px 2px 2px 2px;float:right}
#decllink a {color:red;font-weight:bold;text-decoration:none;background-color:inherit}
#decllink a:hover {color:white;text-decoration:none;background-color:red}
When hovering over the link, the intended effect is for the text color and background color to switch. Initially, the link text appears in red with a white background. On hover, the background turns red while the text becomes white. This functionality works correctly with the current HTML/CSS setup.
But a problem arises when hovering causes the red background to only cover the text area, instead of creating a "button" look with padding around it as desired. The goal was to have a red border-like effect around the text upon hovering.
To achieve this effect, an adjustment needs to be made to the existing HTML/CSS code. Providing guidance on how to implement this will ensure that the desired visual outcome is achieved.