Ejs - How can we hover in ejs file?

Question

I want to implement a function. My app is made in angularjs and nodejs. I am sending an email, and in that email I have a button to click.

<td style="padding-top:32px;" class="suggest-artist">
                    <a href="<%=url%>" style="border:solid 1px rgba(0,0,0,0.8); text-align:center; display:block; font-size:17px; text-decoration:none;
                        color:rgba(0,0,0,0.8); font-family:'SlateStd-Bk', 'Lucida Grande', 'Lucida Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; padding:27px 10px 22px;"
                        onMouseOver="bgChange('green')"
                        onMouseOut="bgChange('blue')">Suggest artists now</a>
        </td>

I want to change the background color on hover, but it seems like it does not work this way. I googled and tried to implement inline hover but it does not work either. So I find this solution onmouseover and onmouseout but this does not work either. I also tried to include an external CSS but it does not work. What should i do?

Answer 1

In your inline style, you have color:rgba(0,0,0,0.8); which overrides the ability to change hover state on your link.

You can, but you don't need JS to change color on hover. Use something like :hover - see below:

 .suggest-artist__link:hover { color: green; } 

 <td style="padding-top:32px;" class="suggest-artist"> <a href="#" class="suggest-artist__link" style="border:solid 1px rgba(0,0,0,0.8); text-align:center; display:block; font-size:17px; text-decoration:none; font-family:'SlateStd-Bk', 'Lucida Grande', 'Lucida Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; padding:27px 10px 22px;">Suggest artists now</a> </td> 

EDIT: Sorry - you wanted background color, not link color...do this:

 .suggest-artist__link:hover { background-color: green; } 

 <td style="padding-top:32px;" class="suggest-artist"> <a href="#" class="suggest-artist__link" style="border:solid 1px rgba(0,0,0,0.8); text-align:center; display:block; font-size:17px; text-decoration:none; font-family:'SlateStd-Bk', 'Lucida Grande', 'Lucida Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; padding:27px 10px 22px;">Suggest artists now</a> </td>