Блог

Главная - Вопросы по программированию - Переход CSS при наведении курсора мыши: после

Переход CSS при наведении курсора мыши: после

#css

#css

Вопрос:

У меня есть код:

 ul {
  width: 160px;
}

ul li a {
  padding-bottom: 40px;
}

ul li  a {
        position: relative;
        display: block;
        transition: all .3s ease-in;
   }

    ul li a:hover:after {
        content: '';
        width: 26px;
        height: 10px;
        background-color: #10c3a2;
        position: absolute;
        top: 30px;
        left: 0;
        display: block;
    } 
 <ul>
  <li><a href="">Item</a>
  <li><a href="">Item</a>
</ul>

Почему переход не работает при наведении курсора мыши: после? Я пытался поместить переход при наведении курсора мыши и после, но это не работает. Как я могу решить эту проблему?

Комментарии:

1. Поскольку ваш псевдоэлемент существует только при наведении курсора на ссылку, как только этого больше не происходит, он немедленно исчезает.

Ответ №1:

Свойства, подобные content и display не подлежащие переходу. Они должны быть объявлены в базовом состоянии, а затем вы можете передавать числовые свойства, например opacity , если вы хотите, чтобы они исчезали / исчезали.

p / s: используйте ::after вместо :after . Последнее является старым синтаксисом.

 ul {
  width: 160px;
}

ul li a {
  padding-bottom: 40px;
}

ul li a {
  position: relative;
  display: block;
  transition: all .3s ease-in;
}

ul li a::after {
  content: '';
  width: 26px;
  height: 10px;
  background-color: #10c3a2;
  position: absolute;
  top: 30px;
  left: 0;
  display: block;
  opacity: 0;
  transition: all .3s ease-in;
}

ul li a:hover::after {
  opacity: 1;
} 
 <ul>
  <li><a href="">Item</a></li>
  <li><a href="">Item</a></li>
</ul>

Ответ №2:

вам нужно добавить это в :after 

 ul {
  width: 160px;
}

ul li a {
  padding-bottom: 40px;
}

ul li  a {
  position: relative;
  display: block;
  transition: all .3s ease-in;
  text-decoration: none;
}

ul li a:after {
  content: '';
  width: 0;
  height: 10px;
  background-color: #10c3a2;
  position: absolute;
  top: 30px;
  left: 0;
  display: block;
  transition: all .3s ease-in;
}

ul li a:hover:after {
  width: 26px;
} 
 <ul>
  <li><a href="">Item</a>
  <li><a href="">Item</a>
</ul>