Question

我的网站上有图像图块，因为想要更好的描述。

在移动设备上，我想在其中一个磁贴上单击一下以显示更多文本（描述该部分的内容），然后再进行第二次点击导航到该链接并打开新页面。

同时，在桌面上我希望鼠标悬停以显示隐藏文字，然后点击导航到该部分。

我原本以为我可以简单地使用悬停 - 在第二次点击打开链接之前，只需点击一次基于触摸的设备即可模拟悬停。但是，对我来说似乎并非如此 - 如果我使用悬停，E.G：

<a class="tileLink" href="/projects/london-serviced-apartments">
    <section class="tile">    
        <img src="/images/lsa-s.jpg" srcset="/images/lsa-m.jpg 600w, /images/lsa-l.jpg 1000w, /images/lsa-xl.jpg 1920w" alt="services" />
        <h1>London Serviced Apartments</h1>
        <p class="hidden">Test hover text</p>
    </section>  
</a>

.tileLink:hover .tile{
    opacity: 0.75;
}

.tileLink:hover p{
    display: inline;
}

当我在其中一个磁贴上点击一次时，隐藏文本会短暂显示，但链接会立即导航到 - 所以在有机会阅读文本并决定是否需要之前，用户会直接进入该部分是否打开链接。

我确实尝试使用Javascript：

$(".tileLink").click(function(e){
        if( $(this).find(".tile").hasClass("tapped") ){

        }else{
            e.preventDefault();
            $(this).find(".tile").addClass("tapped").find("p").removeClass("hidden");
        }
});

实际上适用于移动设备，但是在桌面悬停上无法正常工作 - 需要点击才能显示隐藏文字，需要第二次点击才能导航到该部分。

有一种简单的方法可以在多个设备上运行吗？

Answer 1

Heres a codepen您正在寻找的内容 - 您可以检查设备是否像这样移动

var isMobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  isMobile = true;
}
if(isMobile) {
  $(".tileLink").on('click', function(e) {
     e.preventDefault();
     var para = $(this).find('p.hidden');
     if(para.hasClass('tapped')) {
       window.location = $(this).attr('href');
     } else {
       $('p.hidden').removeClass('hidden').addClass('tapped');
     }
  });
} else {
  $('.tileLink').on('mouseover', function() {
     $(this).find('p.hidden').removeClass('hidden');
  });
}

Answer 2

也许你可以试试pointer-events，只有在<a>的家长关注时才允许点击。

我认为您的链接可能在列表中（或其他）。

在一个片段下面来测试这个想法。

*我想，最好是通过javascript来管理这个以使其成为一个可以预示的* *

mediaquerie仅过滤触摸屏似乎不可靠，小的是。

＆＃13;

.tileLink:hover .tile,
.tileLink:focus .tile {
  opacity: 0.75;
}

.tileLink:hover p,
.tileLink:focus p {
  display: inline;
}

li {
  float: left;
}

li a {
  pointer-events: none;
}

li:focus a,
li:hover a {
  pointer-events: auto;
}

＆＃13;

<h1>test double click to trigger link </h1>
<ul>
  <li tabindex="0">
    <a class="tileLink" href="/projects/london-serviced-apartments">
      <section class="tile">
        <img src="http://dummyimage.com/200" srcset="http://dummyimage.com/300 600w,http://dummyimage.com/400 1000w, http://dummyimage.com/400 1920w" alt="services" />
        <h1>London Serviced Apartments</h1>
        <p class="hidden">Test hover text</p>
      </section>
    </a>
  </li>
</ul>

＆＃13;

使用想法http://codepen.io/anon/pen/yYyKJv http://codepen.io/anon/pen/xwbWRB

在第二次点按时打开超链接的最佳方式

2 个答案: