БЛОГ НА HUSL


что сделать чтобы Hover не двигал другие блоки

Автор вопроса: Anastasia

При наведении на текст в навигации navigation-list_item:hover двигает все нижний div line из-за чего вся страница начинает прыгать. Не понимаю как это можно исправить(

@import url("./header.css");
*{
  margin:0;
  padding:0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.container{
  max-width: 1200px;
  margin: auto;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}
.header {
  background-image: url("../img/imgbanner.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  padding-bottom: 120px;
}

.header::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(37, 43, 73, 0.8);
  z-index: 0;
}

.navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 100px;
}

.logo {
  width: 270px;
  margin-right: 10px;
  font-size: 26px;
}

.logo-active {
  color: #656980;
  font-family: "Raleway";
  font-weight: 800;
}

.logo-box {
  color: #fff;
  font-family: "Raleway";
  font-weight: 200;
}

.navigation-list {
  display: flex;
  position: relative;
}

.navigation-list_item {
  width: 134px;
  text-align: center;
  transition: 0.3s;
}

.navigation-list_item a {
  font-size: 13px;
  font-family: "Raleway";
  color: #fff;
  text-transform: uppercase;
  transition: 0.3s;
}

.navigation-list_item:hover {
  border-bottom: 3px solid #BABBC5;
  transition: 0.3s;
}

.navigation-list_item:active {
  border-bottom: 3px solid #E71414;
  transition: 0.3s;
}

.navigation-list_item a:active {
  color: #E71414;
  transition: 0.3s;
}

.line::after {
  content: "";
  display: block;
  width: 1170px;
  height: 1px;
  background-color: #BABBC5;
  position: absolute;
}
<section class="header">
  <div class="container">
    <div class="navi">
      <div class="logo">
        <span class="logo-active">ACTIVE</span><span class="logo-box">BOX</span>
      </div>
      <ul class="navigation-list">
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>features</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>works</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>our team</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>testimonials</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>download</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="line"></div>
    </div>
  </div>
</section>
<section class="features">
  <div class="container">

  </div>
</section>


Источник

Ответы (2 шт):

Автор решения: Anatoly

Проблема в том, что Вы добавляете ссылке по :hover нижнюю границу(border-bottom), изменяя тем самым размер блока, это и вызывает прыжки других элементов. Если для вас важна эта граница, то задайте её ссылке сразу и сделайте прозрачным, а по :hover и :active добавляйте цвет.

→ Ссылка
Автор решения: rusgeli

Задайте блоку без :hover нижнюю границу такой же толщины, только прозрачную, тогда за счет того, что она будет указана, при применении :hover ничего не будет сдвигаться:

@import url("./header.css");
*{
  margin:0;
  padding:0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.container{
  max-width: 1200px;
  margin: auto;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}
.header {
  background-image: url("../img/imgbanner.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  padding-bottom: 120px;
}

.header::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(37, 43, 73, 0.8);
  z-index: 0;
}

.navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 100px;
}

.logo {
  width: 270px;
  margin-right: 10px;
  font-size: 26px;
}

.logo-active {
  color: #656980;
  font-family: "Raleway";
  font-weight: 800;
}

.logo-box {
  color: #fff;
  font-family: "Raleway";
  font-weight: 200;
}

.navigation-list {
  display: flex;
  position: relative;
}

.navigation-list_item {
  width: 134px;
  text-align: center;
  transition: 0.3s;
  border-bottom: 3px solid transparent;
}

.navigation-list_item a {
  font-size: 13px;
  font-family: "Raleway";
  color: #fff;
  text-transform: uppercase;
  transition: 0.3s;
}

.navigation-list_item:hover {
  border-bottom: 3px solid #BABBC5;
  transition: 0.3s;
}

.navigation-list_item:active {
  border-bottom: 3px solid #E71414;
  transition: 0.3s;
}

.navigation-list_item a:active {
  color: #E71414;
  transition: 0.3s;
}

.line::after {
  content: "";
  display: block;
  width: 1170px;
  height: 1px;
  background-color: #BABBC5;
  position: absolute;
}
<section class="header">
  <div class="container">
    <div class="navi">
      <div class="logo">
        <span class="logo-active">ACTIVE</span><span class="logo-box">BOX</span>
      </div>
      <ul class="navigation-list">
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>features</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>works</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>our team</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>testimonials</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>download</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="line"></div>
    </div>
  </div>
</section>
<section class="features">
  <div class="container">

  </div>
</section>

Либо же вы можете сделать эту границу через псевдоэлемент :after:

@import url("./header.css");
*{
  margin:0;
  padding:0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.container{
  max-width: 1200px;
  margin: auto;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}
.header {
  background-image: url("../img/imgbanner.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  padding-bottom: 120px;
}

.header::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(37, 43, 73, 0.8);
  z-index: 0;
}

.navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 100px;
}

.logo {
  width: 270px;
  margin-right: 10px;
  font-size: 26px;
}

.logo-active {
  color: #656980;
  font-family: "Raleway";
  font-weight: 800;
}

.logo-box {
  color: #fff;
  font-family: "Raleway";
  font-weight: 200;
}

.navigation-list {
  display: flex;
  position: relative;
}

.navigation-list_item {
  width: 134px;
  text-align: center;
  transition: 0.3s;
  position:relative;
  padding-bottom: 3px;
}

.navigation-list_item a {
  font-size: 13px;
  font-family: "Raleway";
  color: #fff;
  text-transform: uppercase;
  transition: 0.3s;
}

.navigation-list_item:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 3px;
  transition: 0.3s;
  width: 100%;
  background-color: transparent;
}
.navigation-list_item:hover:after {
  background-color: #BABBC5;
}

.navigation-list_item:active {
  border-bottom: 3px solid #E71414;
  transition: 0.3s;
}

.navigation-list_item a:active {
  color: #E71414;
  transition: 0.3s;
}

.line::after {
  content: "";
  display: block;
  width: 1170px;
  height: 1px;
  background-color: #BABBC5;
  position: absolute;
}
<section class="header">
  <div class="container">
    <div class="navi">
      <div class="logo">
        <span class="logo-active">ACTIVE</span><span class="logo-box">BOX</span>
      </div>
      <ul class="navigation-list">
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>features</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>works</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>our team</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>testimonials</p>
          </a>
        </li>
        <li class="navigation-list_item">
          <a class="#" href="#">
            <p>download</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="line"></div>
    </div>
  </div>
</section>
<section class="features">
  <div class="container">

  </div>
</section>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.