为什么我的变换后的元素在悬停时会弹回来？-css教程-PHP中文网

为什么我的变换后的元素在悬停时会弹回来？

Mary-Kate Olsen

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

原创

484 人浏览过

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中文网其他相关文章！