如何使用 CSS 打开和关闭操作菜单？

Question

我正在创建一个浮动操作按钮。

我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="#" class="float" id="menu-share">
    <i class="fa fa-share my-float"></i>
</a>
<ul>
    <li>
        <a href="#"><i class="fa fa-facebook my-float"></i></a>
    </li>
   <li>
        <a href="#"><i class="fa fa-google-plus my-float"></i></a>
    </li>
    <li>
        <a href="#"><i class="fa fa-twitter my-float"></i></a>
    </li>
</ul>

小提琴链接：jsfiddle.net/7zkjas08.

目前在我的代码中，当用户单击操作按钮时会出现弹出窗口，并且用户需要单击或点击屏幕上的某处以关闭弹出窗口。

我想要这样的功能：jsfiddle.net/r2hxbL5j

当用户单击按钮时，它会显示十字 X 关闭符号。因此用户可以点击/单击十字符号，弹出窗口消失。

Answer 1

很酷的菜单，而您正在尝试使用 CSS 来实现这一点。我想自己做一段时间。 bootstrap 使用的是一种叫做 pseudo elements 的东西来显示字符。您只需在悬停时将该字符替换为其他字符即可。

我检查了#menu-share 元素以找出所有这些。只需添加以下代码，就可以了。

/* when hovering the "a" tag, change the content in the pseudo-element "before" */ 
a#menu-share:hover > i::before{
  content: '✕';
  font-weight: bold;
}

我添加了乘法字符。如果您想使用 X，我建议您将 font-family 更改为 sans-serif，例如 Arial。

---

[编辑]
恕我直言，无法使用 CSS 为按钮添加关闭功能，因此需要添加以下功能：

/* Old code, but you need to put the next one below this one */
a#menu-share:hover + ul{
  visibility: visible;
  animation: scale-in 0.5s;
}

/* When giving the element focus (=clicking or tabbing to), close */
a#menu-share:focus + ul {
  visibility: hidden;
}

/* Ignore any kind of pointer interaction */
.float > i {
  pointer-events: none;
}


<a onmouseout="this.blur()" href="#" class="float" id="menu-share">

this 表示“这个元素”，即a 标签。 blur() 表示移除焦点。我还需要在 CSS 中添加 .float > i 语法才能使其正常工作。