我请求为移动设备添加点击功能,因为桌面悬停效果无法使用-在桌面上可以正常使用。问题是,一旦发生图像交换,就需要定向一个链接。仅通过CSS进行交换之后,是否可以先进行一次单击交换,然后再单击指向链接的单击?我知道在Javascript中可能有对点击事件进行操作的方法,但是由于首选的消息传递方式是通过电子邮件,因此首选CSS,因为据我所知,Javascript被剥离用于电子邮件。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
.display-mobile {
display: none!important;
max-height: 0;
max-width: 0;
overflow: hidden;
}
.display-desktop {
display: block!important;
}
.mobile-show {
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0;
mso-hide: all;
overflow: hidden;
}
@media only screen and (max-width:599px) {
body .two-column {
white-space: normal!important;
}
body .mobile-hide {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
line-height: 0 !important;
padding: 0;
max-height: 0;
mso-hide: all;
width: 0 !important;
}
body .mobile-show {
display: block !important;
visibility: visible !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5em !important;
overflow: auto !important;
width: auto !important;
height: auto !important;
}
}
/* wrapping in media query prevents styles from activating in OWA */
.yfix{}
@media screen and (max-width:9999px) {
.reveal img{
max-height: 0px;
height:0px;
}
.reveal:hover img{
max-height: none;
height: auto;
}
* [lang=x-reveal] img{
max-height: 0px;
height:0px;
}
* [lang=x-reveal]:hover img{
max-height: none;
height: auto;
}
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#e5e5e5" style="background-color:#e5e5e5;border-collapse:collapse;mso-table-lspace:0px;mso-table-rspace:0px;" >
<tr>
<td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly;" >
<table align="center" class="em_main_table" width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5" style="table-layout:fixed;border-collapse:collapse;mso-table-lspace:0px;mso-table-rspace:0px;" >
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;" >
<div class="mobile-hide">
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;mso-table-lspace:0px;mso-table-rspace:0px;" >
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;" background="https://via.placeholder.com/300x200?text=Normal">
<!-- LINK URL -->
<a class="reveal" lang="x-reveal" href="#" target="_blank" class="em_full_link" style="border-collapse:collapse;mso-line-height-rule:exactly;display:block;width:300px;height:200px;" >
<!-- IMAGE URL -->
<img src="https://via.placeholder.com/300x200?text=Hovered" alt="" width="300" height="200" class="em_full_width mobile-hide" border="0" align="left" style="display:block;max-width:300px;border-width:0 !important;outline-style:none !important;width:300px;height:200px;" />
</a>
</td>
</tr>
</table>
</div>
<!--[if !mso]><!-->
<div class="mobile-show" style="-webkit-text-size-adjust:none;display:none;font-size:0;max-height:0;line-height:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;mso-hide:all;" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;mso-table-lspace:0px;mso-table-rspace:0px;" >
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;" background="https://via.placeholder.com/400x300?text=Normal">
<a class="reveal" lang="x-reveal" href="#" target="_blank" class="em_full_link" style="border-collapse:collapse;mso-line-height-rule:exactly;display:block;width:400px;height:300px;" >
<img src="https://via.placeholder.com/400x300?text=Hovered" alt="" width="400" height="300" class="em_full_width" border="0" align="left" style="display:block;max-width:400px;border-width:0 !important;outline-style:none !important;" />
</a>
</td>
</tr>
</table>
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
任何帮助或建议都会很棒。