Question

将此作为有效的幻灯片，

::-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怎么办？问候

Answer 1

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

首先，您需要更改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上来逆转此过程。

祝你好运。

Answer 2

感谢LogicalBranch，Rachel ...我是这样子的：

$（document）.click（function（）{ if（this！= $（“＃note”）[0]）{ $（“＃note”）。hide（）; } }）;

如何在幻灯片上添加关闭按钮

2 个答案: