时间戳

首页 > 解决方案 > 如何在下拉菜单中添加关闭按钮

html - 如何在下拉菜单中添加关闭按钮

问题描述

将此作为工作幻灯片，

::-webkit-scrollbar {
            width: 0px;  /* remove scrollbar space */
            background: transparent;
            }
        /* optional: show position indicator in red */
        ::-webkit-scrollbar-thumb {
            background: #FF0000;
            }
        @-webkit-keyframes slideDown {
            0%, 100% { -webkit-transform: translateY(-485px); }
            10%, 90% { -webkit-transform: translateY(0px); }
            }
        @-moz-keyframes slideDown {
            0%, 100% { -moz-transform: translateY(-485px); }
            10%, 90% { -moz-transform: translateY(0px); }
        }
    .cssanimations.csstransforms #note {
        -webkit-transform: translateY(-485px);
        -webkit-animation: slideDown 20.5s 1.0s 1 ease forwards;
        -moz-transform:    translateY(-50px);
        -moz-animation:    slideDown 20.5s 1.0s 1 ease forwards;
    }

html:

<div id="note">
    {{=XML(news)}}
</div>

我需要为用户添加一个按钮以关闭幻灯片，以防她不想阅读信息。不添加/使用js怎么办？问候

标签： htmlcss

解决方案

最接近 CSS 点击的是:active选择器。

首先，您需要更改 HTML，以便将您的 HTML{{=XML(news)}}包装在div标签中。

<div id="note">
  <p>Won't be affected.</p>
  <div id="sub-div">{{=XML(news)}}</div>
</div>

接下来将其添加到您的 CSS 中：

#note:active #sub-div {
  display: none
}

现在，当您“单击”该元素时，它将被隐藏，而当您“单击”其他内容时，它将再次显示。

注意：p标签不会受到这个 CSS 的影响，因为我们只是选择标签div。

您也可以尝试使用:hover选择器，如下所示：

#note:hover #sub-div {
  display: none
}

:hover当用户将鼠标移开时，它将隐藏子元素并显示它div#note。

注意：您可以通过隐藏元素然后在:active/上显示它来反转此过程:hover。

祝你好运。

推荐阅读