JavaScript link underline styling

Question

I'm using an onmouseover/onmouseout over a table cell to change the styling for an image and a link in the cell. It works but is overriding the CSS link styling, namely the text-decoration: none and font color. I've tried correcting with inline CSS, but no dice. Any ideas? Also, I know the code is hideous. I just want to get it working before I put it into an external js file.

<td 
  onmouseover="
    document.getElementById('myImage').style.border='3px solid #334f92'; 
    document.getElementbyId('myLink').style.fontWeight='bold';
    document.getElementbyId('myLink').style.textDecorationLine='none';"" 
  onmouseout="
    document.getElementById('myImage').style.border='1px solid #000000';
    document.getElementbyId('myLink').style.fontWeight='normal';
">

Answer 1

First off, good thing you recognize that writing inline event listeners are not very conventional (and also hideous).

Have you considered achieving this through CSS? It may be a lot simpler and would eliminate the need for two separate event listeners for mouseover and mouseout. You would simply use the:hover css selector like so:

 td { border: 1px solid black; /* Added padding for demonstration purposes */ padding: 20px; } td:hover { border: 3px solid #334f92; font-weight: bold; text-decoration: none; } td:hover a { color: orange; } td:hover img { border-radius: 10px; }

 <table> <tr> <td> <a href="#">Link</a> <img src="https://via.placeholder.com/100"> </td> <td> <a href="#">Link</a> <img src="https://via.placeholder.com/100"> </td> </tr> </table>

In addition, if you wanted to style an image within the <td> tag, you can do this:

td:hover img {
  /*Apply CSS to image here*/
}