Question

我进行了一些研究，但似乎无法使用其他人的解决方案来修复它。我正在尝试在悬停 .cols 容器时为下拉描述框设置动画。

我有以下代码：

    .cols-wrapper .cols .desc {
        min-height: 150px !important;
        display: none;
        position: absolute;
        background-color: #fff;
        width: 285px;
        padding: 10px 25px 25px;
        box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        z-index: 99;
        opacity: 0;
        transition: 0.3s ease all;
        transform: translateY(-30px);
    }
    
    .cols-wrapper .cols:hover .desc {
        display: block;
        opacity: 1;
        transform: translateY(0px);
    }

<div class="cols-wrapper">
  <div class="cols col1">
    <img src="image.jpg">
    <h4>Title</h4>
    <div class="desc">
      <p>Description goes here</p>
      <a href="#" class="cta">Submit</a>
  </div>
</div>

有人可以给它一个破解吗？

谢谢

Answer 1

从两者中删除 display 参数：

.cols-wrapper .cols .desc {
        min-height: 150px !important;
        position: absolute;
        background-color: #fff;
        width: 285px;
        padding: 10px 25px 25px;
        box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        z-index: 99;
        opacity: 0;
        transition: 0.3s ease all;
        transform: translateY(-30px);
    }
    
    .cols-wrapper .cols:hover .desc {
        opacity: 1;
        transform: translateY(0px);
    }

<div class="cols-wrapper">
  <div class="cols col1">
    <img src="image.jpg">
    <h4>Title</h4>
    <div class="desc">
      <p>Description goes here</p>
      <a href="#" class="cta">Submit</a>
  </div>
</div>

CSS 转换转换未按预期工作

1 个答案: