0

Нужна ваша помощь с кодом. У меня есть меню. Я задаю для каждого элемента меню ширину и делаю между ними отступы. Мне нужно чтобы при приведении элемент меню заполнялся цветом с отступлением, типа как на картинке. Я использую свойство: width: calc(100% + 20px);, но это не работает. Что я делаю не так ли? Спасибо

картинка

.logo_and_menu nav div {
  width: calc(100% + 20px);
  text-align: center;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.logo_and_menu nav div:hover {
  width: calc(100% + 20px);
  background-color: #F2F3F5;
}
<div class="logo_and_menu">
  <img src="/assets/images/Canva.png">
  <nav>
    <div><a>Home</a></div>
    <div><a>Design</a></div>
    <div><a>Templates</a></div>
    <div><a>Features</a></div>
    <div><a>Learn</a></div>
    <div><a>Plans</a></div>
  </nav>

3
  • Я конечно не шарю особо за css, но зачем к максимальному значению (100%), вы прибавляете 20px? Шире кнопка не станет, всё, 100% - это Максимум Commented 21 дек. 2021 в 12:30
  • @Mr.AntonDer, дело в том, что мне нужно чтобы каждый элемент меню, при наведении, затемнялся и от текста к краю блока, в котором стоит элемент меню, были отступы По-этому, я задаю для каждого елемента ширину 100% + 20px для отступов, но к сожалению так не работает Commented 21 дек. 2021 в 12:37
  • но у вас вообще-то все итак работает jsfiddle.net/m1qexcnv/2, я только ограничила ширину родителя и задала цвет для видимости. Правда, лучше не менять ширину при ховере, у вас будет косячный немного эффект. Лучше ссылкам задайте псевдоэлемент и при ховере его растягивайте через transform: scaleX(120%)
    – VladykoD
    Commented 21 дек. 2021 в 22:00

1 ответ 1

2

.items {
  display: flex;
  flex-direction: column;
  padding-left: 0;
}

.item {
  list-style: none;
}

.item:not(:last-child) {
  margin-bottom: 16px;
}

a {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 8px 16px;
  background-color: #ccc;
  text-decoration: none;
  color: #181818;
}

a:hover {
  background-color: #181818;
  color: #ccc;
}
<nav class="menu">
  <ul class="items">
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
  </ul>
</nav>

Если я вас правильно понял, то можно реализовать вот так

1
  • Цвет уже подправите под необходимый
    – Krovorgen
    Commented 21 дек. 2021 в 12:44

Ваш ответ

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

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