主页 / 问题 / 1586087
Accepted
Майя
Asked:2024-07-04 14:44:34 +0000 UTC2024-07-04 14:44:34 +0000 UTC

通过 js 在高度上实现按钮的平滑外观

  • 772

当鼠标悬停在块上时，需要通过 js 来实现按钮的平滑外观，通过网格不合适，也可以通过 css，只需要通过 js 提前感谢。 

.box__inner-btn {
  display: none;
}
.box__inner:hover .box__inner-btn {
  display: block;
}
                <div class="box">
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                </div>

javascript

1 个回答

  1. Best Answer

    这是一个使用 的示例grid，但您需要再添加 2 个元素，并在其中添加div.box_inner-content另一个元素div

    .box_inner-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}

.box__inner:hover .box_inner-content {
  grid-template-rows: 1fr;
}

.box_inner-content > div {
  overflow: hidden;
}
    <div class="box">
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box_inner-content">
     <div>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
     </div>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box_inner-content">
      <div>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
      </div>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box_inner-content">
      <div>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
      </div>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box_inner-content">
      <div>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
      </div>
    </div>
  </div>
</div>

    尝试2：这里是一个不使用css，只使用js的例子。

    const box = document.querySelector('.box');
const boxInner = box.querySelectorAll('.box__inner');

boxInner.forEach((item) => {
  const trigger = item.querySelector('.box__inner-text');
  const content = item.querySelector('.box__inner-content');

  const height = content.scrollHeight;

  trigger.addEventListener('mouseover', () => {
    content.style.height = height + 'px';
  })

  trigger.addEventListener('mouseout', () => {
    content.style.height = 0 + 'px';
  })
})
    .box__inner-content {
  height: 0;
  overflow: hidden;
  transition: 200ms;
}
    <div class="box">
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box__inner-content">
      <a href="#" class="box__inner-btn">
        Подробнее
      </a>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box__inner-content">
      <a href="#" class="box__inner-btn">
        Подробнее
      </a>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box__inner-content">
      <a href="#" class="box__inner-btn">
        Подробнее
      </a>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box__inner-content">
      <a href="#" class="box__inner-btn">
        Подробнее
      </a>
    </div>
  </div>
</div>

    • 1

相关问题