14

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

Moak
  • 12,596
  • 27
  • 111
  • 166
  • 3
    Although one would think css support is common in mail clients, you should reconsider: http://www.campaignmonitor.com/css/ http://www.xavierfrenette.com/articles/css-support-in-webmail/ – nc3b May 09 '10 at 06:55
  • 1
    @nc3b: cool, could have added this to an answer and I'd accept that I can't use pseudo inline – Moak May 17 '10 at 08:06

2 Answers2

20

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.

Roope
  • 4,469
  • 2
  • 27
  • 51
0

I you are certain your css will not be removed, you can use a hover and a background-color property

.panel:hover {
    background-color: #EFEFEF;
}

Also it does not seem possible to use a pseudo-selector in an inline style, so that might be a stopper:

Community
  • 1
  • 1
nc3b
  • 15,562
  • 5
  • 51
  • 63