我需要使用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来实现。我想自己做一段时间。引导程序使用的是称为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，建议您将字体系列更改为无衬线字体，例如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语法才能使其正常工作。