变换闪烁

Question

当我将鼠标悬停在框上并尝试单击按钮时出现闪烁。有人可以帮我吗，我不知道该找谁解决。

JSFiddle：https://jsfiddle.net/PedroTavares/fv7qjw8b/3/

.box {
    margin-top: -1.5rem;
    position: relative;
    width: 250px;
    height: 250px;
    background-color: #06F;
    transition: all .3s cubic-bezier(.34,1.61,.7,1);
    z-index: 1;
}

.box:hover {
    transform: translateY(-80px);
}

.box-btn{
  margin-top: -3rem;
  width: 250px;
  display: flex;
  justify-content: center;
}

button{
  margin: 5px;
}

<div style="margin-top: 110px;" ></div>
<div>
  <div class="box"></div>
  <div class="box-btn">
    <button> Text </button>
    <button> Text </button>
  </div>
</div>

Answer 1

我相信这是适合您的解决方案。
我只是在 `.box` 周围添加 `.wrap` class，现在您可以在悬停时单击按钮。

.box {
    margin-top: -1.5rem;
    position: relative;
    width: 250px;
    height: 250px;
    background-color: #06F;
    transition: all .3s cubic-bezier(.34,1.61,.7,1);
    z-index: 1;
}

.wrap {
  display: inline-block;
}

.wrap:hover .box {
    transform: translateY(-80px);
}

.box-btn{
  margin-top: -3rem;
  width: 250px;
  display: flex;
  justify-content: center;
}

button{
  margin: 5px;
}

<div style="margin-top: 110px;" ></div>
<div class="wrap">
  <div class="box"></div>
  <div class="box-btn">
    <button> Text </button>
    <button> Text </button>
  </div>
</div>

变换闪烁

Transform flickering

html

css

transform