Как открыть и закрыть меню действий с помощью 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>

Fiddle Link: jsfiddle.net / 7zkjas08 .

В настоящее время в моем коде, когда пользователь нажимает кнопку действия, появляется всплывающее окно, и пользователю нужно щелкнуть или нажать где-нибудь на экране, чтобы закрыть всплывающее окно.

Мне нужна такая функция: jsfiddle.net/ r2hxbL5j

Когда пользователь нажимает кнопку, на нем появляется знак закрытия крестика X. Таким образом, пользователь может нажать / щелкнуть знак креста, и всплывающее окно исчезнет.

Answer 1

Классное меню, и вы пытаетесь добиться этого с помощью CSS. Я хотел сделать это сам на некоторое время. То, что использует бутстрап, это то, что называется псевдоэлементами для отображения символа. Вам просто нужно заменить этот символ на что-то другое при наведении курсора.

Я проверил элемент #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, я предлагаю изменить семейство шрифтов на 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() означает удалить фокус с. Мне также нужно было добавить синтаксис .float > i в CSS, чтобы это работало.