1

在我的网站（通过 WordPress 运行）上，我有一系列可点击的图像缩略图。当您将鼠标悬停在缩略图上时，缩略图上方会出现一个灰色框。出现的这个灰色框是一个可点击的链接，但只有80%的灰色框是可点击的。

我的问题是 iPhone 在单击此框时如何反应。当您单击 80% 区域（可单击区域）之外的任意位置时，会出现灰色框。这很棒。但是，如果您单击这 80% 区域内的任何位置，您将自动进入链接，而不是出现灰色框。这在文本形式上可能看起来有点混乱，所以我画了一张图片来展示我的问题： iPhone悬停问题

假设你在 iPhone 上，你会看到一个你想要点击的缩略图。如果您在 80% 区域之外单击，灰色框会正常显示。但是，如果您在这 80% 的区域（即实际链接的区域）内单击，您将被重定向到外部源，甚至看不到应该出现的灰色悬停框。这就是问题。我希望它像在计算机上一样工作，所以如果你在 iPhone 上单击缩略图上的任意位置，灰色的悬停框应该始终出现，而不是将你重定向到外部链接。因为将用户链接到 iphone 上的外部源的 80% 区域设置为display:none并且对用户基本上是不可见的（直到您将鼠标悬停在缩略图上）。用户不应该能够点击他们看不到的链接。

那么，无论用户单击缩略图上的哪个位置，我如何才能使单击 iPhone 时始终出现悬停灰色框？任何建议或意见都会很棒。

更新：

这是使灰色 div 出现的 jquery（通过opacity）

$( document ).ready( function() {
$('.entry-image').mouseover(function(){
    //show the box
    $(this).children('.thumbhover').stop().animate({opacity:1},300);
});

$('.entry-image').mouseleave(function(){
    //hide the box
    $(this).children('.thumbhover').stop().animate({opacity:0},500);
});

我还在 CSS 和 jquery 中添加display:none了我的 thumbhover div，show()因此 div 使用不显示opacity:0，然后当你将鼠标悬停在它们上时，它有一个块显示和一个opacity:1

4

3 回答 3

0

如果您真的想让灰色框出现，请在第一个元素上设置单击事件以使灰色框出现。然后在灰色框上再次单击以将您带到任何地方...

我做了一个演示：

jsfiddle

HTML：

<div id="box">
   <a class="link one" href="#first">First click</a>
   <a class="link two" href="#second">Second click</a>
</div>

然后你的脚本：

$('.one').on('click', function(evt) {
    evt.preventDefault();
    console.log('clicked');
    $('.two').css({
      'top': '0px'
    });
});

$('.two').on('click', function(evt) {
   evt.preventDefault()
   // outside link
   alert("You clicked an outside link!");
});
于 2013-03-02T00:27:59.563 回答
0

似乎当 iPhone 用户触摸该框时，首先触发“悬停”事件（因此始终显示灰色框），然后触发“单击”事件，因此如果在 80 内，用户将被定向到链接％ 区域。问题是这两个事件是顺序和立即发生的（不像在计算机中），所以你甚至看不到灰色框，因为页面已经被重定向到一个新页面。

您是否尝试过在链接的 onclick 事件上显示灰色框？我的意思是，复制您在“悬停”事件中执行的样式过程并将其放入链接的“单击”事件中。

更新以回答您的评论：

您可以使用以下 Javascript 检测用户是否在移动设备上：

function isMobileDevices() {
    return navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) !== null
}

在这种情况下采取不同的行动。例如，这很丑陋，在“点击”事件上通过 Javascript 打开链接，而不是使用真正的<a>链接，但如果我们在移动设备中，只有在第二次或以上时才打开链接用户点击它。为此，您将不得不跟踪每个盒子的状态，这有点费力。

可能更好的选择是研究触摸事件并相应地管理这些事件。

更新

查看您网站的来源，我看不到您正在使用display:none，正如您在问题中提到的那样。我明白opacity:0了，这是不同的。display:none在需要开始为不透明度设置动画之前，您是否尝试过真正使用？

于 2013-03-01T23:31:23.610 回答
0

我修复了 iPhone 上的双击/触摸悬停问题，方法是制作可点击区域display:none;，然后通过 CSS 使其在悬停时再次可见。像这样。。

.thumbhover {display:none;}

.entry-image:hover .thumbhoverimg {display:block !important;}

所以我使可点击区域不可见，然后当用户将鼠标悬停在“entry-image”div 上时再次可见。这似乎解决了 iPhone 上的悬停问题。:)

于 2013-03-02T02:13:34.770 回答