Question

我使用双击（在iPhone上）：悬停元素显示额外信息，没有javascript，只是简单的css：hover pseudoclass。现在我遇到的问题是，显示在上面的div：悬停不再消失，只有当我点击另一个时：悬停元素。：iOS中的悬停功能是否已更改？

li.to-be-hovered {
  position:relative;
}
li.to-be-hovered div.hidden {
  display:none;
}
li.to-be-hovered:hover div.hidden {
  display:block;
  position:absolute;
}

还有一些更像宽度，顶部，左边，边距，背景，z-index等......

<div>
  <ul>
    <li class="to-be-hovered">
      <div class="hidden">
        lots of extra information with image, span, link elements
      </div>
    </li>
  </ul>
</div>

在我的iPhone（4S）上，div.hidden出现在div.to-hovered的第一个标签上，但在点击元素外的其他位置时不再消失。有人知道这个效果吗？是否可以使用纯CSS再次消失，或者我必须对所有这些元素使用Javascript吗？

Answer 1

简单，无需JavaScript。这是修复

将此添加到您的css mediaquery

body {cursor：pointer}

Answer 2

JS：

var hidestuff = function() {
    // Hide lots of extra information with image, span, link elements
    // $(elm).hide();
}

$('html').touch(hidestuff).click(hidestuff);

CSS：

.hidestuff { position: absolute; z-index:1}

因此，如果用户触摸任何需要点击的元素，则隐藏“hidestuff”

希望这会有所帮助：/

是否有可能隐藏：在iPhone上再次点击外面时悬停元素（纯css）？

2 个答案: