主页 / 问题 / 1002793
Accepted
Frenc Olesov
Asked:2020-07-15 03:58:05 +0000 UTC2020-07-15 03:58:05 +0000 UTC

如何消除悬停时的方块抖动

  • 772

我正在为导航设置样式，并且遇到了内容在悬停时反弹的事实。可能是什么问题呢？

https://codepen.io/VadimStrelov/pen/bPyxpv

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 58px;
  &__logo {
    display: block;
    background-image: url(../img/header_logo.svg);
    background-repeat: no-repeat;
    width: 137px;
    height: 28px;
  }
  &-list {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    &__item {
      margin-left: 20px;
      color: #000;
      font-weight: 400;
      font-size: 16px;
      letter-spacing: 0.8px;
      cursor: pointer;
      padding-bottom: 8px;
    }
    &__item:hover {
      border-bottom: 3px solid #00E593;
      transition-duration: 3ms;
      padding-bottom: 5px;
    }
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Drag</title>
</head>

<body>
  <div class="page-main">
    <header>
      <div class="header">
        <a href="#" class="header__logo"></a>
        <ul class="header-list">
          <li class="header-list__item">Home</li>
          <li class="header-list__item">About</li>
          <li class="header-list__item">Contents</li>
          <li class="header-list__item">Books</li>
          <li class="header-list__item">Education</li>
          <li class="header-list__item">Skills</li>
          <li class="header-list__item">Portfolio</li>
          <li class="header-list__item">Clients</li>
          <li class="header-list__item">Contact</li>
        </ul>
      </div>
    </header>
    <div class="wrap">
      <div class="block-book">
        <div></div>
        <div class="block-text">
          <p class="block-text__name">- By Emma Anderson</p>
          <h1 class="block-text__title">BUKEE: THE BOOK<span>A room without books is like a body without a soul</span></h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis
            iste natus error sit voluptatem accusantium doloremque.</p>
          <a href="#" class="block-text__btn">Buy this book - $15.00</a>
          <small>* Some conditions may applicable</small>
        </div>
      </div>
    </div>
  </div>
  <div class="page">
    <div class="wrap">
      <div class="block-author">
        <div class="block-text">
          <p class="block-text__name">- By Emma Anderson</p>
          <h2 class="block-text__title">Emma Anderson<span>A room without books is like a body without a soul</span></h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis
            iste natus error sit voluptatem accusantium doloremque.</p>
          <a href="#" class="block-text__btn">Read full biography</a>
        </div>
        <div></div>
      </div>
      <div class="block-counter">
        <p><span>12</span> Total published books</p>
        <p><span>5</span> Happy readers</p>
        <p><span>15,000</span> Happy readers</p>
      </div>
    </div>
  </div>
  <div class="page page-gray">
    <div class="wrap">
      <h2 class="page__title">Book Contents</h2>
      <p class="page__subtitle">Let’s see what we have covered in the book</p>
      <div class="block-about">
        <div>
          <h3>About the book</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali qua. Ut enim ad minim veniam, quis nostrud exercitation ull amco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillu m dolore eu fugiat nulla pariatur.</p>
          <div>
            <p>Featured in:</p>
            <ul>
              <li>
                <a href="#"></a>
              </li>
              <li>
                <a href="#"></a>
              </li>
              <li>
                <a href="#"></a>
              </li>
            </ul>
          </div>
        </div>
        <div>
          <h3>Table of contents</h3>
          <ol>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipisicing elit</li>
            <li>Labore et dolore magna</li>
            <li>Consectetur adipisicing elit</li>
            <li>Labore et dolore magna</li>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipisicing elit</li>
            <li>Labore et dolore magna</li>
            <li>Consectetur adipisicing elit</li>
            <li>Labore et dolore magna</li>
          </ol>
          <button>More</button>
        </div>
      </div>
    </div>
  </div>
  <script src="../js/main.js"></script>
</body>

</html>

css3

2 个回答

  1. Best Answer

    您在块上有一个 8px 的填充，在悬停时添加了 3px 的边框，然后变成了 11px。

    &__item:hover {
    border-bottom: 3px solid #00E593;
    transition-duration: 3ms;
    padding-bottom: 5px;
}
    • 0

  2. 尝试使用：

    box-sizing：边框框；

    然后边框将成为元素高度的一部分，如果有的话。或者，您可以使用轮廓而不是边框​​。

    https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

    • 0

相关问题