可关闭 <div> 在 Chrome 浏览器上不起作用答案

【问题标题】：Closable <div> not working on Chrome browser可关闭 <div> 在 Chrome 浏览器上不起作用
【发布时间】：2015-04-03 13:41:10
【问题描述】：

我正在使用纯 CSS 而不是 Javascript 实现可关闭的 <div>。

HTML 和 CSS：

<!DOCTYPE html>
<html>
  <head>
<style>
  div.messages 
  {
    padding: 10px;
    background-image: none;
    border: 1px solid transparent;
    border-color: #bce8a1;
    border-radius: 5px;
    width: 300px;
  }

  div.messages:before
  {
    content: "\274C";
    float: right;
    cursor: pointer;
  }

  div.messages:active
  {
    height: 0px;
    display: none;
  }
</style>
  </head>
  <body>
<div class= "messages">
      In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. Replacing meaningful content that could be distracting with placeholder text may allow viewers to focus on graphic aspects such as font, typography, and page layout. It also reduces the need for the designer to come up with meaningful text, as they can instead use hastily generated lorem ipsum text.
</div>
  </body>
</html>

代码有效（有点），但我有一些注释想寻求帮助

关闭在 Firefox 上运行正常； Chrome 似乎也关闭了，但只要松开鼠标，<div> 就会重新出现
每当我单击其范围内的任何位置时，<div> 都会闪烁。如何让它继续显示？

【问题讨论】：

reappears as soon as the mouse is released 是:active 的行为
你评论过这个stackoverflow.com/questions/19704477/… 吗？
使用 CSS 无法永久更改对象 onclick 的状态。只有当您希望在按住鼠标按钮时发生某些事情时，Active 才真正有用。
这是否意味着我必须使用 Javascript？

标签： html css google-chrome firefox

【解决方案1】：

这里的问题是你正在使用 :active 来修改你的 div。 Active 是为元素上的鼠标事件保留的 css 字。我自己从来没有发现需要在 div 上使用 :active 。（本质上，我将它们用于可点击的对象，即锚点、按钮）。现在 :active 也仅在点击发生时应用。

您会注意到单击 div 的中心也会缩小到 height: 0px。

解决方案：

-正确的解决方案是使用 js，通过按钮切换，将类应用于要缩小的 div。该课程将有height: 0; display:none;

-您可以使用带有 :active 的锚点来破解它。但这是不好的做法。（有机会我会更新）

【讨论】：