5

我在 :hover 元素上使用双击（在 iPhone 上）来显示额外信息，没有 javascript，只是简单的 css :hover 伪类。现在我的问题是，出现在 :hover 上的 div 不再消失，只有当我点击另一个 :hover 元素时。iOS 中的 :hover 功能是否发生了变化？

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-be-hovered 的第一个选项卡上，但在点击元素外的其他位置时不再消失。有人知道这个效果吗？是否可以使用纯 CSS 使其再次消失，或者我必须对所有这些元素使用 Javascript？

4

2 回答 2

2

简单，不需要javascript。这是修复

将此添加到您的 CSS 媒体查询

正文 {光标：指针}

于 2014-07-03T06:44:12.557 回答
0

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}

因此，如果用户触摸除了需要点击的元素之外的任何地方，“隐藏的东西”将被隐藏

希望这可以帮助 ：/

于 2013-08-02T01:26:19.563 回答