Наведите указатель мыши на элемент меню списка только для значков и уберите скрытый текст справа налево - PullRequest
Новая
       6

Наведите указатель мыши на элемент меню списка только для значков и уберите скрытый текст справа налево

0 голосов
/ 12 марта 2020

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

https://codepen.io/onesneakymofo/pen/qBdxyjB

HTML: 

<div class="box">
  <ul>
    <li>
      <span class="hide-me">Users</span>
      <span class="fas fa-list fa-user fa-2x fa-inverse icon"></span>
    </li>
    <li>
      <span class="hide-me">Email</span>
      <span class="fas fa-list fa-envelope fa-2x  fa-inverse icon"></span>
    </li>
    <li>
      <span class="hide-me">Settings</span>
      <span class="fas fa-list fa-cog  fa-2x fa-inverse icon"></span>
    </li>
  </ul>
</div>

CSS: 

.box{
  position: relative;
  background: tomato;
  height: 500px;
  width: 500px;

}

ul {
  z-index: 1;
  position: absolute;
  right: 10px;
}

li {
  position: relative;
  list-style: none;
  height: 50px;
  width: 50px;
  padding: 5px;
  right: 25px;
  line-height: 0;
  margin-bottom: 25px;
  top: 5px;
  background: #333;
  border-radius: 25px;
}


.hide-me{
  font-size: 26px;
  opacity: 0;
}

li:hover{
  top: 0px;
  background-color: orange;
  transition: width 1s ease-out;
  width: 125px;
}

li:hover .hide-me { 
    opacity: 100;
    transition: opacity .35s;
    position: absolute;
    top: 25px;
}

li:hover .icon {
  position: absolute;
  right: 5px;
  top: 5px;
}

span {
  color: #fff;
}

Самая близкая вещь, которую я нашел к тому, что я хочу, это

{ ссылка }

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

Спасибо.

1 Ответ

0 голосов
/ 12 марта 2020

Вы можете использовать ::after и position:absolute, чтобы поместить контент за вашим меню, и :hover::after, чтобы затем переместить его сзади. Соответствующий CSS находится в заголовке HTML ниже. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      li {
        background-color: white;
        display: inline-block;
      }
      li::after {
        content: "12345";
        position: absolute;
        left: 50px;
        transition: all 1s ease;
        z-index: -1;
      }
      li:hover::after {
        left: 200px;
        transition: all 1s ease;
      }
    </style>
  </head>

  <body>
    <ol>
      <li>qwertyuiop asdf</li>
      <br>
      <li>qwertyuiop asdf</li>
      <br>
      <li>qwertyuiop asdf</li>
      <br>
    </ol>
  </body>
</html>
...