1

введите сюда описание изображения

Хочу сделать меню так, чтобы при наведении над текстом появлялась такая линия

введите сюда описание изображения

#primary-menu li a {
    color:#ffffff;
    text-transform:uppercase;
    font-       weight:bold;
}
#primary-menu li:last-child {
    padding-right:0;
}
#primary-menu li a:hover {
    color:#ffffff;
    text-decoration:none;
    transition:color 0.2s ease;
}
#primary-menu  a:hover {
    background-image: url(assets/img/1.jpg);
} 

Возможно ли это сделать в CSS, или надо использовать JavaScript, jQuery?

1 ответ 1

2

Вам нужно свойство border, а точнее border-top. JS тут не нужен

li {
  display: inline-block;
  padding: 5px;
  font-size: 16px;
  line-height: 20px;
  font-family: sans-serif;
  font-weight: bold;
  border-top: 2px solid transparent;
  /* Что бы элементы не скакали */
  transition: border-color .3s ease; /* для понтов */
  cursor: pointer
}
li:hover {
  border-color: red; /* меняем с прозрачного на красный */
}
<ul>
  <li>Пункт</li>
  <li>Пункт</li>
  <li>Пункт</li>
  <li>Пункт</li>
  <li>Пункт</li>
</ul>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.