What is the most universal way to set :hover for elements in an html email?

E

Evgeny Popov2015-12-15 20:33:46

gmail

Evgeny Popov, 2015-12-15 20:33:46

This option, for example, works in gmail, which, in turn, cuts out everything superfluous from the template body (in its opinion, for example, a class):

<head>
  <style type="text/css" media="screen">
    * span[title="img"] img[title="hover"]{display:none !important;}
    * span[title="img"]:hover img[title="default"]{display:none !important;}
    * span[title="img"]:hover img[title="hover"]{display:block !important;}
  </style>
</head>
<body>
...
<span style="display:block;" title="img">
<img title="default" alt="" border="0" width="100%" src="http://i.ss.lv/gallery/1/28/6969/riga-region-carnikavas-nov-kalngale-1393682.800.jpg" style="display:block;"/>
<img title="hover" alt="" border="0" width="100%" src="http://i12.fastpic.ru/big/2010/1112/f3/530d321c27ab64881abd264bdbb636f3.jpg" style="display:block;"/>
</span>

!important in this case is needed first of all when external images are used in the body of the letter and :hover must interact with them as in the example, then the images are hidden by default and the user shows them by clicking on the corresponding button in the interface and then they have display: block; .
In the Yandex Mail Interface, images are displayed by default regardless of