CSS過渡沒有回應

我是使用過渡的新手，但我的過渡沒有回應。我的代碼一定有問題。我在我的網站上使用卡片，我添加了一個 (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>

uj5u.com熱心網友回復：

正如我在評論中提到的：

• 展示
• 彈性方向
• 證明內容

是不可影片的CSS 屬性，因此transition不會animation產生任何影響，定義中的其他影片屬性將被忽略。

這可以通過在opacity: 0和之間轉換來規避1。

在片段中，類.inner-card的定義與您通常一樣，但opacity: 0用于“隱藏”其內容。

引入選擇器.card:hover .inner-card {..}來控制過渡到opacity: 1而不需要JS。

為了完成，當游標離開卡片時，類.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>

uj5u.com熱心網友回復：

如果我理解正確并且您需要在審核期間呈現文本，那么就是這里。

.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也可以完成。如果我誤解了你，請告訴我。

標籤：javascript html jQuery css jQuery-ui

上一篇：在動態創建的串列之間移動專案

下一篇：如何使用jQuery切換類來添加類或洗掉元素？