How to create a hover effect in a newsletter?

html css newsletter
Moak picture Moak · May 9, 2010 · Viewed 41.7k times · Source

I'm creating a newsletter, and i want to have panels that change background-color on mouse over.
Seeing as the newsletter wont have a head, I am defining all styles inline. I'm pretty sure most popular mail clients will block JS. So I was wondering if I can define a hover effect in the style attribute. Or is there any other solution to achieve this effect?
Peace

Answer

Roope picture Roope · Jul 14, 2013

Have you checked these?

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

http://www.hongkiat.com/blog/design-perfect-newsletter/

The latter article says this:

Hover effects are not supported in Outlook 2007/2010, Gmail, iOS or Android. You may still want to include the a:hover style for all supporting clients: Outlook 2000/2003, Hotmail, Apple Mail, and Yahoo! mail ...

Javascript is a no-go. There is really no solution to this, some will accept :hover, some not. From that first link you can see which will and which will not.

Related questions

How do I remove link underlining in my HTML email?

<td width="110" align="center" valign="top" style="color:#000000;"> <a href="https://example.com" target="_blank" style="color:#000000; text-decoration:none;">BOOK NOW </a> </td> I used this code to make a link in …

Read More
Convert web html to e-mail Html

I was wondering, if there is software out there that can convert an (web html css) to (e-mail html inline css) file, in order to be viewable from most e-mail clients like outlook, Thunderbird or webmails like gmail,yahoo,hotmail …

Read More
Body background color not working for email newsletter

I am working on an email newsletter. Everything else is in place and working fine, except for the body background color, or it’s the body width at 100% that is not working. Any idea what I have done wrong here, …

Read More