為什麼我的變換後的元素在懸停時會彈回來？-css教學-PHP中文網

為什麼我的變換後的元素在懸停時會彈回來？

Mary-Kate Olsen

發布： 2024-10-30 04:35:02

原創

485 人瀏覽過

Why Do My Transformed Elements Snap Back on Hover?

為什麼我的變換會突然恢復？

在 CSS 領域，難以捉摸的消失變換可能是個令人費解的現象。在這裡，我們深入研究此問題的一個特定實例，其中元素的轉換似乎在轉換時恢復。

問題：轉換元素彈回

考慮以下CSS 程式碼：

<code class="css">.blockquote {
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

登入後複製

將滑鼠停留在blockquote 元素上時，效果很奇怪。雖然變換事件最初會觸發，但翻譯後的元素最終會恢復到原來的位置。

原因與解

這個問題的關鍵在於CSS 屬性「顯示」。 CSS 轉換通常與設定為 display: inline 的元素不相容。因此，要解決對齊問題，需要修改顯示設定以顯示：inline-block。

以下是更新的程式碼：

<code class="css">.blockquote {
  display: inline-block;
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

登入後複製

經過此更改，過渡應按預期運行，元素將在懸停時保持其變換後的位置。

以上是為什麼我的變換後的元素在懸停時會彈回來？的詳細內容。更多資訊請關注PHP中文網其他相關文章！