Question

我在www.iwanczuk.com/temp/test/nim.htm上有一个测试页面，它显示了我遇到的问题。在手机浏览器上查看（我使用IOS）如果点击触发图像，则会出现一个包含列表的div。你只能通过点击小猫的照片来实现它。如果点击照片下方的文字，列表将不会隐藏。我试图让一个动作使列表消失在div包装器上，它包含小猫图像和文本但没有结果。我已根据我所做的搜索尝试了不同形式的此操作但我尝试过的任何工作都没有。我只是尝试使用CSS。

下面提供了HTML和CSS，非常感谢任何帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>annoying problem</title>
    <link rel="stylesheet" href="nim.css" type="text/css" />
</head>
<body>
    <div class="list_trigger">
        <img src="trig.jpg" width="300" height="30" />
        <div class="list">
            <p>line 1</p>
            <p>line 2</p>
            <p>line 3</p>
        </div>
    </div>
    <div class="wrapper">
        <div class="photo">
            <img src="kitten.jpg" width="300" height="250" />
        </div>
        <div class="text">
            <p>Phasellus aliquet lorem congue felis sodales convallis. Nullam in bibendum lectus, a scelerisque quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie mauris quis suscipit congue. Nulla facilisi. Ut tempus elementum eleifend. Nullam in congue magna. Donec laoreet lorem dui, sed tincidunt arcu ullamcorper eget. Aliquam et massa et elit vestibulum sodales ac eget tellus. Morbi id fringilla neque, sed porta augue. Maecenas suscipit augue ultricies, fringilla velit a, luctus libero. Integer eleifend tempor varius. Aliquam erat volutpat. Fusce ex libero, scelerisque ut volutpat a, ultricies id mauris. Nunc egestas neque lorem, in scelerisque tortor varius sed.</p>
         </div>
     </div>
</body>
</html>

CSS：

@charset "UTF-8";

.list_trigger {
    position: fixed;
    z-index: 10;
    border: #000 1px solid;
}

.list {
    position: absolute;
    background: #FCFEEF;
    display: none;
    opacity: 0.95;
    z-index: 20;
    top: 0;
    left: 0;
    border: #F00 1px solid;
    padding: 10px;
}

.list_trigger:hover>.list {
    display: block;
}

.wrapper:hover>.list {
    display: none;
}

.wrapper {
    position: absolute;
    top: 50px;
    left: 10px;
    z-index: 5;
}

.text {
    width: 300px;
}

Answer 1

您可以在div上使用:focus伪造的类和tabindex。

这是a jsfiddle - 点击蓝色div以查看焦点生效并关闭它以反转效果。

<div class='dissappear-on-blur' tabindex='1'></div>

.dissappear-on-blur {
    background-color: #77f;
}

.dissappear-on-blur:focus {
    background-color: #f77;
}

代码非常简单，我使用颜色在示例中更清楚地显示效果。您可以使用所需的css替换它们以显示和隐藏，例如，不透明度。

Tab索引对于使元素可聚焦很重要。它具有使元素键盘可聚焦的优点，这对于可访问性非常有用（请记住，通过缩放桌面浏览器可以轻松触发小屏幕的媒体查询）。

请记住，隐藏display: none;内容的内容会将其从文档中完全删除，从而使其无法调整。

This example更复杂，包括容器和容器中的另一个div。它表明同样的效果适用于更复杂的环境，涉及父母和兄弟姐妹。

您还需要将css包装在适当的媒体查询中。

如何在移动浏览器失去焦点时使div消失

1 个答案: