CSS Hover Question

I'm working on an email template and in my CSS I have defined both a:link and a:hover. When in the CampaignMonitor editor the hover links work as expected. However, when I click to preview the email the hover no longer works. I sent myself a test email and the hover effects do not seem to work in Entourage or when I view the email in a browser window. Any ideas why this is happening and how to fix it?

zapatoche, 7 years ago

Did you try to specify all links states, :link :visited :hover :active.

talknmime talknmime, 7 years ago
zapatoche :

Did you try to specify all links states, :link :visited :hover :active.

Yep. Still no change. Am I the only one with this issue?

jdancisin, 7 years ago

No, you're not the only one. I think it has something to do with the inline styles that are applied when the templates are imported. I haven't been able to find away around this either.

JordanK, 7 years ago

Not all email clients support the :hover state. Check:

http://www.campaignmonitor.com/css/

zapatoche, 7 years ago
JordanK :

Not all email clients support the :hover state. Check:

http://www.campaignmonitor.com/css/

True but if you don't specify all the links states then the change doesn't happen for the email client that support it.

bzoo, 7 years ago

if have exactly the same problem as talknmime, i don't think thats a matter of support by the client here as it also doesn't work in the browser version. i assume it's because the inline/element style "color" that get applied to the anchors. Elemtent Sytles seem to override pseudo-selectors ... thats at least what firebug shows me. could somebody at CM please confirm that so i can get some sleep ;-)

Mathew Mathew, 7 years ago

Hi,

To clarify: The issue is that there is no way to apply hover styles inline, so if you apply link styles inline, the normal link colours override the hover styles set in the head.

The only workaround is to not have your link styles inline at all.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mooner, 7 years ago

Except its CM that inserts the styles inline, so there really is no avoiding it. Plus, according to this, you guys were going to implement this long ago.... what happened?!

stephenwalker78, 7 years ago

.... so can CM stop rendering inline link styles or what ?

TWLOHA, 6 years ago

I'd like to know if there's been a fix for this.  CM is adding inline styles to all links, so any CSS in the head is overridden by the inline styles.  Is there a way to tell the editor not to add the inline styles?

Mathew Mathew, 6 years ago

No, I'm afraid that all styles are added inline at the moment, including link states, so if you want to use Campaign Monitor's automatic inline styles you would need to leave out the hover styles at the moment.

It is possible that in the future we'd have a way to mark certain styles for not being inlined, and I'll add your votes for that.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
ed.melly, 6 years ago

Could be wrong, but I think adding !important to your :hover and :active rules should do it.

So, have this in the head:

<style type="text/css">
a:hover { text-decoration: none !important; }
a:active { text-decoration: none !important; }
</style>

And apply inline styles:

<a href="#" style="color: rgb(200,220,40); text-decoration: none;">here</a>

TWLOHA, 6 years ago

ed.melly, I think that did it!  I added the !important tag to my :hover rule and that overrode the inline a:link tag.  It seems to be working perfectly, thanks!!

Mathew Mathew, 6 years ago

Ah, good idea! We've not tested that in email clients, so if you can let us know which ones you tried in we'd love to hear it.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
TWLOHA, 6 years ago

I've tested in Apple Mail 4, and it works great.  Also works in the browser version of the email.  Hovers don't seem to work when you access the message from gmail, though.

Mathew Mathew, 6 years ago

Apple Mail does have great support for just about everything you could imagine, which can spoil us as designers!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
ed.melly, 6 years ago

I've done a few tests, and the results aren't great. Outlook 07, Gmail and Yahoo! all ignore the :hover rules. Hotmail plays nice though.

Mathew Mathew, 6 years ago

An update to this thread:

As of our last release this week, designers can specify an special media type to elements they don't want brought inline. i.e

@media all,cm_dontinline {
a { color: red }
}

anything in that style block will not be brought inline. That lets you define styles that will only work in the head.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098