Is there a way to implement :hover entity to a link inline?-CodePudding

I am working on an HTML email signature, which has to be done using rudimentary HTML. I have to use very simple CSS, tables and declare inline CSS for everything. All in all it works fine, but I have an issue with links. I can stripe the link to have no underline or color:

<a style="text-decoration: none; color:inherit!important;" href="https://#">link</a>

But don't know it is possible at all to add :hover entity inline?

a: hover {text-decoration: underline;}

Any ideas are welcome!

CodePudding user response：

There's no equivalent :hover in inline css.

You can give your anchor tag a class or id and change the property you need in there

<a > link </a>

Inside your css stylesheet

.anchor{ 
   text-decoration: none;
}

if you don't want to use external stylesheet you can add a onm ouseover attribute to the element like so

<a href="#" onm ouseover="this.style.textDecoration='none'" onm ouseout="this.style.color='red'"> Link </a>

CodePudding user response：

The inline style have higher priority.

simply remove the text-decoration: none; from the element.

a{
  text-decoration: none; 
}
a:hover {
  text-decoration: underline;
}

<a style="color:inherit!important;" href="https://#">link</a>

another way is to add !important, but it's considered a bad habit:

a:hover{
   text-decoration: underline !important;
}