Нажмите на изображение и, когда поменяете местами, добавьте ссылку через CSS - PullRequest
Новая
       6

Нажмите на изображение и, когда поменяете местами, добавьте ссылку через CSS

0 голосов
/ 17 октября 2018

У меня есть запрос на добавление функции щелчка для мобильных устройств, так как эффект наведения рабочего стола не может быть использован - отлично работает для рабочего стола.Проблема заключается в том, что существует ссылка, которая должна быть направлена ​​после замены изображения.Можно ли сделать первоначальный щелчок для свопинга, а затем клик, указывающий на ссылку после свопа только через 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>

Любая помощь или предложения будут отличными.

...