CSS 转换没有响应

Question

我刚开始使用转换，我的转换没有响应。我的代码一定有问题。我在我的网站上使用卡片，我添加了一个 (mouseenter) 以在鼠标悬停时在卡片上显示信息，它可以工作，但转换会引发错误，可能有一些我不理解的地方，任何帮助是赞赏！

        <div class="card">
            <div class="inner-card">
                <h5>Title</h5>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
                <a href="">Link goes here</a>
                <div class="img-div">
                    <img src="../static/img/search.png" class="card-img" alt="">
                </div>
            </div>
        </div>
.card{
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 350px;
    height: 180px;
    background: lightgreen;
    border: 2px solid black;
    margin-left: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
.inner-card{
    display: none;
    
} 
.inner-card.active{
    display: flex;
    flex-direction: column;
    justify-content: end;
    background:rgba(255,165,0,0.5)
    transition: all 400ms ease-in-out;

}

    <script>
        $(document).ready(function () {
            $('.card').on('mouseenter', function () {
                $(this).find(".inner-card").toggleClass('active');
            });
            $('.card').on('mouseleave', function () {
                $(this).find(".inner-card").toggleClass('active');
            });
        });
    </script>

Answer 1

如果我理解正确，并且您需要在审阅过程中展示文本，那么就在这里。

.inner-card a{
  color: inherit;
  text-decoration: none;
  text-decoration: underline;
}

.inner-card{
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 350px;
  height: 180px;
  margin-left: 8px;
  margin-top: 15px;
  color: lightgreen;
  background-color: lightgreen;
  border: 2px solid black;
  padding: 10px;
  border-radius: 3px;
}

.inner-card:hover{
  cursor: pointer;
  color: black;
  background: rgba(255,165,0,0.5);
}

<div class="card">
  <div class="inner-card">
    <h5>Title</h5>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
    <a href="#">Link goes here</a>
    <div class="img-div">
      <img src="../static/img/search.png" class="card-img" alt="">
    </div>
  </div>
</div>

这个任务不用js也能完成。如果我误解了你，请告诉我。

Answer 2

如我的评论所述：

显示
flex-direction
justify-content

是none-animatableCSS属性，因此transition和animation不会有影响，其他animatable定义中的属性被忽略。

这可以通过在 opacity: 0 和 1 之间转换来规避。

在片段中，class .inner-card 的定义与您通常的定义相同，但使用 opacity: 0 到 'hide' 它的内容。

引入选择器.card:hover .inner-card {..}，无需JS即可控制向opacity: 1的过渡

为了完整起见，class .inner-card 需要 transition 以便在光标离开卡片时平滑过渡回原始状态。

.card{
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 350px;
    height: 180px;
    background: lightgreen;
    border: 2px solid black;
    margin-left: 8px;
    margin-bottom: 8px;
}
.inner-card{
  display: flex;
  flex-direction: column;
  justify-content: end;
  opacity: 0;
  background-color: transparent;
  transition: opacity 400ms ease-in-out, background-color 400ms ease-in-out;
} 
.card:hover .inner-card {
    cursor: pointer;
    opacity: 1;
    background-color:rgba(255,165,0,0.5);
    transition: all 400ms ease-in-out;
}

<div class="card">
  <div class="inner-card">
    <h5>Title</h5>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
    <a href="">Link goes here</a>
    <div class="img-div">
      <img src="../static/img/search.png" class="card-img" alt="">
    </div>
  </div>
</div>

CSS 转换没有响应

CSS transition not responding

html

javascript

css

jquery

jquery-ui