简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah> hujung hadapan web> tutorial css> teks badan

CSS3实现hover离开时平滑过渡的实例详解

巴扎黑
Lepaskan： 2018-05-28 17:36:52
asal
8382 orang telah melayarinya

本篇文章主要介绍了CSS3实现伪类hover离开时平滑过渡效果示例，具有一定的参考价值，有兴趣的可以了解一下

由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。

大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。

      离开时效果生硬
Salin selepas log masuk

由于p元素只有在:hover伪类触发的时候，效果才能加到p元素上。

当鼠标离开p元素的时候，:hover伪类将不再生效，瞬间丢掉hover里写的动画效果。

此时，我们应当在原本元素上再写一个一模一样的transition效果，将离开断掉的动画效果续接上。

      简单解决
Salin selepas log masuk

此时，不管鼠标在什么时候离开元素，都会原样返回。

Atas ialah kandungan terperinci CSS3实现hover离开时平滑过渡的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css3 hover
sumber：php.cn
Artikel sebelumnya：css3 background-image属性实例详解 Artikel seterusnya：如何使用CSS3来代替JS实现交互教程
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tambah "<" selepas elemen dengan class='btn' dan gantikan kandungan asal selepas elemen ialah :hover:after Output pada ':hover' sentiasa "1IPSUM" Jika saya memutuskan untuk menambah eleme...
daripada 2023-09-09 12:32:51
0
2
319
Bagaimana untuk menukar warna teks selepas klik? Apa yang saya mahu lakukan ialah menukar warna latar belakang butang dan juga menukar warn...
daripada 2023-08-30 20:19:37
0
2
233
Pengikatan peristiwa pada elemen yang dicipta secara dinamik? Saya mempunyai beberapa kod di mana saya mengulangi semua kotak pilihan pada halaman dan m...
daripada 2023-08-23 15:04:33
0
2
197
Imej bersaiz penuh yang melaraskan resolusi secara automatik berdasarkan saiz penyemak imbas Saya mempunyai laman web penghantaran. Bagaimanakah saya boleh menjadikan imej tuding saya...
daripada 2023-08-16 11:40:39
0
1
203
Tambah secara dinamik : kesan hover pada berbilang elemen Adakah mungkin untuk menambah kesan hover pada berbilang elemen secara pemrograman? Dalam ...
daripada 2023-08-15 23:49:58
0
1
179
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！