Трудно объяснить, имитируйте этот эффект наведения панели ссылок

Таким образом, если вы наведете курсор между «дом» и «продукты», вы увидите нижнюю границу, которая будет следовать за курсором. Может ли кто-нибудь подумать, как я могу применить это ко всей панели ссылок, чтобы граница в основном следовала за мышью при наведении курсора на эти ссылки?

#linkbar {
  width: 54%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.linklist {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display: flex;
}

.linklist li {
  font: normal 1.6em 'Nanum Myeongjo', serif;
  padding: 0;
  width: 100%;
  border-right: 1px solid black;
  position: relative;
  top: 0;
}

.linklist a {
  text-decoration: none;
  color: black;
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid transparent;
  transition: border .3s, color .2s;
}

.linklist li:last-child {
  border-right: none;
}

.linklist a:hover {
  color: maroon;
  display: block;
}

.linklist a:after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: maroon;
  transition: .3s;
  position: absolute;
  bottom: 0;
}

.linklist a:hover:after {
  width: 100%;
}

.home:after {
  right: 0;
}
<div id="linkbar">
  <ul class="linklist">
    <li><a class="home" href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>
<!--linkbar-->

Позвольте мне знать, если вам нужно что-нибудь еще. Я ценю любую помощь, которую вы можете предложить. Я все еще изучаю принципы CSS, и сейчас я только начинаю разбираться в селекторах.

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

Justinas 10.09.2018 09:50

Эти ссылки должны быть в состоянии помочь вам: Пример Codepen, веб-дизайн tutplus, Статья о CSS-хитростях. Я предпочитаю tutplus, потому что он не перемещает линию снова при потере зависания.

Vanch 10.09.2018 09:53

@Justinas, поэтому я сказал, что кажется, будто граница следует за курсором. Мне понравились все эти статьи, Крис, теперь я знаю, что это называется скользящим подчеркиванием!

Al Pal 11.09.2018 06:49

Рад слышать! Пожалуйста, проголосуйте, если я помог. :)

Vanch 11.09.2018 16:29
0
4
52
1

Ответы 1

Я редактировал код. Думаю, это вам поможет.

#linkbar {
  width: 54%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.linklist {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display: flex;
}

.linklist li {
  font: normal 1.6em 'Nanum Myeongjo', serif;
  padding: 0;
  width: 100%;
  border-right: 1px solid black;
  position: relative;
  top: 0;
}

.linklist a {
  text-decoration: none;
  color: black;
  display: block;
  width: 100%;
  background:transparent;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid transparent;
  transition: border .3s, color .2s;
}

.linklist li:last-child {
  border-right: none;
}

.linklist a:hover {
  color: maroon;
  display: block;
}

.linklist a:after {
  content: '';
  width: 0px;
  height: 100%;
  display: block;
  background: #aaa;
  z-index:-1;
  transition: .3s;
  position: absolute;
  bottom: 0;
}

.linklist a:hover:after {
  width: 100%;
}

.home:after {
  right: 0;
}
<div id="linkbar">
  <ul class="linklist">
    <li><a class="home" href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>
<!--linkbar-->

Это только добавило цвет фона к нему, хотя спасибо за вашу помощь.

Al Pal 11.09.2018 06:48

Другие вопросы по теме