Rumah hujung hadapan web tutorial css hover不起作用怎么办

hover不起作用怎么办

Mar 03, 2021 am 10:40 AM
hover

hover不起作用的解决办法:1、检查并删除“:hover”前的空格;2、检查并修改正确的类名;3、检查“:hover”是否被置于“:link”和“:visited”之前,修改位置即可。

hover不起作用怎么办

本教程操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑。

css中hover不起作用的几种原因:

1.在设置:hover前加空格:

比如

<style type="text/css">
.one {
margin: 0 auto;
width: 400px;
height: 300px;
background: #ced05d;
}
.two {
margin: 0 auto;
width: 100px;
height: 100px;
background: #5a5aea;
}
.three {
margin: 0 auto;
width: 200px;
height: 100px;
background: #4b9c49;
}
.four {
margin: 0 auto;
width: 300px;
height: 100px;
background: #7b4141;
}
.one :hover {
background: #da56d0;
}
</style>
<body>
<h1>测试</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>
Salin selepas log masuk

你发现鼠标经过class为one的时候背景不变,而经过one里面的其他div背景颜色发生变化,

说明:hover前加空格,本身不会有:hover的效果,而后代元素会有:hover的效果。

【推荐学习:css视频教程

2.当鼠标经过时,让其他元素改变样式:

这时候你会发现,只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效

3.类名写错了;

4.:hover 被置于 :link 和 :visited 之前了;

在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

Atas ialah kandungan terperinci hover不起作用怎么办. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Petua CSS: Gunakan peralihan untuk mengekalkan keadaan tuding Petua CSS: Gunakan peralihan untuk mengekalkan keadaan tuding Sep 27, 2022 pm 02:01 PM

Bagaimana untuk mengekalkan keadaan tuding? Artikel berikut akan memperkenalkan kepada anda cara mengekalkan keadaan tuding tanpa menggunakan JavaScript. Saya harap ia akan membantu anda!

Pengalaman terbang dengan kamera Haval X1 Pengalaman terbang dengan kamera Haval X1 Jan 15, 2024 pm 02:21 PM

Kita sering dapat melihat banyak video top-down yang menarik di Internet Gambar-gambar yang diambil oleh dron memang agak mengejutkan di mana penerbangan dihadkan? Malah, "drone" sedia untuk terbang adalah arus perdana semasa, dan ia lebih sesuai untuk pilihan kebanyakan orang Hari ini saya akan memberi anda pengalaman langsung dengan Harvest Flying Camera X1. Dari segi penampilan, Harvest Flying Camera X1 mempunyai reka bentuk lipatan pertama. Keseluruhan kamera hanya 125g, yang lebih ringan daripada telefon bimbit Ia boleh dipegang dengan mudah selepas dilipat dan boleh dimasukkan ke dalam beg tanpa sebarang tekanan. Empat daun yang dicelup lembut dan reka bentuk bingkai keselamatan melindungi keselamatan penangkapan dengan sempurna. Daun Dicelup secara inovatif menggunakan substrat biologi berasaskan Bio, yang sangat elastik dan tahan lama, selamat dan mesra alam ia juga mempunyai bingkai perlindungan sepenuhnya untuk melindungi tangan anda semasa berlepas dan mendarat.

Bagaimana untuk mengalih keluar acara hover dalam css Bagaimana untuk mengalih keluar acara hover dalam css Feb 01, 2023 am 10:06 AM

Kaedah untuk mengalih keluar peristiwa hover css: 1. Melalui "$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })" kaedah untuk mengikat acara hover; 2. Nyahikat acara hover melalui kaedah "$('a').off('mouseenter').unbind('mouseleave');" kaedah. boleh.

Peranan hover dalam html Peranan hover dalam html Feb 20, 2024 am 08:58 AM

Peranan hover dalam HTML dan contoh kod khusus Dalam pembangunan web, hover merujuk kepada mencetuskan beberapa tindakan atau kesan apabila pengguna menuding kursor pada elemen. Ia dilaksanakan melalui CSS :hover pseudo-class. Dalam artikel ini, kami akan memperkenalkan peranan hover dan contoh kod khusus. Pertama, tuding membolehkan elemen menukar gayanya apabila pengguna menuding di atasnya. Contohnya, apabila menuding tetikus pada butang, anda boleh menukar warna latar belakang butang atau warna teks untuk mengingatkan pengguna perkara yang perlu dilakukan seterusnya.

Mengapa hover ialah unsur pseudo Mengapa hover ialah unsur pseudo Oct 09, 2023 pm 05:45 PM

Hover bukan unsur pseudo, ia adalah kelas pseudo. Kelas pseudo digunakan untuk memilih keadaan atau tingkah laku tertentu unsur, manakala unsur pseudo digunakan untuk menambah gaya pada bahagian tertentu unsur. Kerana :hover digunakan untuk memilih keadaan tertentu elemen, dan bukannya menambah gaya pada bahagian tertentu elemen, anda boleh menggunakan :hover pseudo-class untuk menggayakan keadaan tetikus elemen, dan anda boleh menggunakan : hover pseudo-class untuk menambah kesan hover pada pautan Warna pautan, warna latar belakang, dsb. boleh berubah apabila tetikus melayang di atasnya.

Cara menggunakan hover dalam css Cara menggunakan hover dalam css Feb 23, 2024 pm 12:06 PM

Kelas pseudo hover dalam CSS ialah pemilih yang sangat biasa digunakan yang membolehkan kita menukar gaya elemen apabila tetikus melayang di atasnya. Artikel ini akan memperkenalkan penggunaan hover dan memberikan contoh kod khusus. 1. Penggunaan Asas Untuk menggunakan hover, kita perlu terlebih dahulu mentakrifkan gaya untuk elemen, dan kemudian menggunakan :hover pseudo-class untuk menentukan gaya yang sepadan apabila tetikus melayang. Sebagai contoh, kami mempunyai elemen butang Apabila tetikus melayang di atas butang, kami mahu warna latar belakang butang bertukar kepada merah dan warna teks kepada putih.

Cara menggunakan hover dalam css Cara menggunakan hover dalam css Nov 24, 2023 am 10:32 AM

Dalam CSS, :hover ialah pseudo-selector yang digunakan untuk memilih elemen yang dituding oleh penuding tetikus. Anda boleh menggunakan :hover untuk menggunakan beberapa perubahan gaya apabila pengguna menuding pada elemen.

Bagaimana untuk menggunakan kaedah jQuery hover(). Bagaimana untuk menggunakan kaedah jQuery hover(). Dec 04, 2023 am 09:56 AM

hover() ialah kaedah yang biasa digunakan dalam jQuery Ia digunakan untuk mengikat dua fungsi pengendalian peristiwa ini akan dilaksanakan apabila penunjuk tetikus memasuki dan meninggalkan elemen padanan. Kaedah penggunaan asas ialah "$(selector).hover(inFunction,outFunction);".

See all articles