html - 单击图像并在交换时通过 CSS 添加链接
问题描述
我要求为移动设备添加点击功能,因为桌面悬停效果将无法使用 - 适用于桌面。问题是,一旦发生图像交换,就需要定向一个链接。是否可以先点击交换,然后在仅通过 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>
任何帮助或建议都会很棒。
解决方案
推荐阅读
- gradle - 如何从另一个自定义插件应用 Kotlin jvm 插件?
- java - 从列表视图数组中拨打电话号码
- azure - Azure Kubernetes 服务 (AKS) 托管集群的安全模型
- python-3.x - 熊猫找到每小时滚动平均值
- django - Django:如何将模型一对象与模型二以形式链接?
- java - 用于链表拆分问题的合并排序的 Java 实现
- angular - 捕获输入值并在使用角度材料输入的按钮单击时显示值
- swift - 如何使用 DJI Mobile SDK 从 mavic pro 重新获取视频?
- javascript - 如何在不使用全局范围或 redux 的情况下在 react-native 中使用全局变量?
- c++ - 禁止“使用‘X’属性是 C++17 扩展”警告