masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > font-weight:blod跳动如何处理

font-weight:blod跳动如何处理

php中世界最好的语言
Lepaskan： 2018-03-20 16:32:10
asal
2570 orang telah melayarinya

这次给大家带来font-weight:blod跳动如何处理，处理font-weight:blod跳动的注意事项有哪些，下面就是实战案例，一起来看一下。

需求：实现鼠标悬停在链接上时，链接字体加粗的功能。

实现方式1：

a:hover{font-weight:blod}
Salin selepas log masuk

结果鼠标悬停的时候，页面会有跳动的现象。因为改变字体的时候改变了元素的大小，所以引起了页面的重排，所以会有跳动的现象。

实现方式2：

a:hover{text-shadow: 1px 0 0 currentColor;}
Salin selepas log masuk

效果对比：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3的动画序列animation

CSS怪异盒模型和标准盒模型如何使用

Atas ialah kandungan terperinci font-weight:blod跳动如何处理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
berurusan dengan
sumber：php.cn
Artikel sebelumnya：CSS用图换字多种方法 Artikel seterusnya：css3中calc在less编译时怎样不被计算
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
Penukaran automatik PX kepada ralat REM  <style>html {   font-size: calc(100vw / 3.75);      }badan {    saiz fon: 0.16rem; ...
daripada 2024-04-16 09:34:16
0
0
4687
Paparkan elemen selepas baris baharu blok Pada masa ini saya mempunyai ini: Saya mahu meletakkan div ikon pada penghujung teks, teta...
daripada 2024-04-04 21:45:21
0
1
271
Menu lungsur turun tengah dalam bar navigasi 我制作了这个CSS/HTML。.navbar{width:100%;background-color:rgb(151,44,44);overflow:auto;}.navbara{...
daripada 2024-04-04 18:24:52
0
1
338
Tajuk jadual diputar secara menegak, dijajarkan di tengah + bawah, penyemak imbas silang Saya mempunyai jadual dengan pengepala berputar yang kelihatan seperti yang diharapkan dal...
daripada 2024-04-04 16:45:25
0
1
330
Saya menghadapi masalah dengan pemformatan output apabila menggunakan tag <br> dalam HTML Saya menghadapi masalah dengan soalan latihan. Jadi anda boleh lihat, saya mempunyai segal...
daripada 2024-04-02 15:56:11
0
1
315
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