変形した要素がホバーすると元に戻るのはなぜですか?

Mary-Kate Olsen
リリース: 2024-10-30 04:35:02
オリジナル
404 人が閲覧しました

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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!