分享几款非常好看的鼠标悬停样式
前言：
当我们需要为鼠标悬停添加一个样式，都会使用hover伪类，通过它我们可以在鼠标移动到元素上时向此元素添加特殊的样式。比如一个普通的URL，当我们将鼠标移动到URL链接上，它会变色。
一、概述
在现实的应用场景也非常之多。最常见的是网站的悬浮导航，当鼠标放到导航条上时，会出现颜色变化或者元素自动伸出菜单栏。
实例1：鼠标hover时，将内容框起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ele:hover {
border:1px solid red;
}
.ele {
#去掉边框闪烁问题。（因为边框1像素会导致闪烁，所以先用1px透明色占住位置，hover时再让其变红，就不会觉得有闪烁了）
border:1px solid transparent;
}
</style>
</head><body>
<div class="ele">
<div>222</div>
<div class="ele-item">111</div>
</div>
</body>
</html>原始效果：
鼠标悬停后：
实例2：尾品会vdangdang.com首页最下面有这样的图片
原始网页：
鼠标悬停后效果：
其实这个主要就是用hover制作而成。下面说一下具体实现：
实现思路：
1、新建一个div1
2、新建一个div2，把底部图片放入div2
3、再新建一个div3，悬浮内容放入div3
HTML代码：
<div class="touch">
<div><img src="3.png"></div>
<div class="content">
<p><h5>品牌故事</h5></p>
<p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。</h6></p>
<input class="inpt" type="text" name="tel" id="tel"/>
<button class="btn">开售提醒</button>
</div>
</div>（学习视频分享：css视频教程）
CSS代码：
1、定义div1高度和宽度，class为touch，overflow设置为hidden，图片超过定义的高度和宽度会隐藏。
.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}2、div2为content，内容必须填满div1，所以设置上下左右都为0.且设置字体大小、颜色、对齐方式。
首先设置div2为不可见，即在鼠标hover之前内容默认是隐藏的，当鼠标悬浮后，再放出来。
.touch .content {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
font-size:20px;
background-color:black;
color:white;
text-align:center;
visibility:hidden;
}3、设置鼠标悬浮时样式。内容放出来，且设置背景图片透明度为0.5，可以被看到。
.touch:hover .content{
visibility:visible;
border:4px solid red;
background-color:rgba(0,0,0,0.5)
}4、最后设置input框和button
.touch .content .btn{
background-color:#e83375;
color:white;
cursor: pointer;
border: none;
width: 70px;
height: 22px;
}
.touch .content .inpt{
height: 18px;
border: none
line-height: 18px;
font-size: 12px;
}整体html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}
.touch .content {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
font-size:20px;
background-color:black;
color:white;
text-align:center;
visibility:hidden;
}
.touch:hover .content{
visibility:visible;
border:4px solid red;
background-color:rgba(0,0,0,0.5)
}
.touch .content .btn{
background-color:#e83375;
color:white;
cursor: pointer;
border: none;
width: 70px;
height: 22px;
}
.touch .content .inpt{
height: 18px;
border: none
line-height: 18px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="touch">
<div><img src="3.png">
</div>
<div class="content">
<p><h5>品牌故事</h5></p>
<p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。 </h6></p>
<input class="inpt" type="text" name="tel" value="请输入手机号码或邮箱地址" id="tel"/>
<button class="btn">开售提醒</button>
</div>
</div>
</body>
</html>关键知识点：
1、最外面的div设置成relative，把content设置absolute，然后top、bottom、left、right设置均为0，即把content铺满div；
2、visibility:hidden；默认隐藏最上面的内容；
3、visibility:visible和background-color:rgba(0,0,0,0.5)，hover时放出内容，并且设置背景透明度，可以看到背景图片；
相关推荐：CSS教程
作者：@skyflask
转载本文请注明出处：https://www.cnblogs.com/skyflask/p/8886508.html
Atas ialah kandungan terperinci 分享几款非常好看的鼠标悬停样式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Bagaimana untuk melumpuhkan pratonton lakaran kecil bar tugas dalam Win11 Matikan teknik lakaran kecil paparan ikon bar tugas dengan menggerakkan tetikus
Feb 29, 2024 pm 03:20 PM
Artikel ini akan memperkenalkan cara untuk mematikan fungsi lakaran kenit yang dipaparkan apabila tetikus menggerakkan ikon bar tugas dalam sistem Win11. Ciri ini dihidupkan secara lalai dan memaparkan lakaran kecil tetingkap semasa aplikasi apabila pengguna menuding tetikus pada ikon aplikasi pada bar tugas. Walau bagaimanapun, sesetengah pengguna mungkin mendapati ciri ini kurang berguna atau mengganggu pengalaman mereka dan ingin mematikannya. Lakaran kecil bar tugas boleh menjadi menyeronokkan, tetapi ia juga boleh mengganggu atau menjengkelkan. Memandangkan kekerapan anda menuding di atas kawasan ini, anda mungkin telah menutup tetingkap penting secara tidak sengaja beberapa kali. Kelemahan lain ialah ia menggunakan lebih banyak sumber sistem, jadi jika anda telah mencari cara untuk menjadi lebih cekap sumber, kami akan menunjukkan kepada anda cara untuk melumpuhkannya. tetapi
HP melancarkan tetikus lembut tiga mod Profesor 1: 4000DPI, Blue Shadow RAW3220, harga awal 99 yuan
Apr 01, 2024 am 09:11 AM
Menurut berita dari laman web ini pada 31 Mac, HP baru-baru ini melancarkan tetikus Bluetooth tiga mod Professor1 di JD.com, tersedia dalam warna teh susu hitam dan putih. Harga awal ialah 99 yuan, dan deposit sebanyak 10 yuan diperlukan. Menurut laporan, tetikus ini mempunyai berat 106 gram, menggunakan reka bentuk ergonomik, berukuran 127.02x79.59x51.15mm, mempunyai tujuh tahap 4000DPI pilihan, dilengkapi dengan sensor Blue Shadow RAW3220, dan menggunakan bateri 650 mAh dikatakan boleh digunakan dengan sekali caj 2 bulan. Maklumat parameter tetikus yang dilampirkan pada tapak ini adalah seperti berikut:
Razer |. Tetikus tanpa wayar dan pad tetikus Pokémon Gengar kini tersedia, dengan harga ditetapkan 1,549 yuan
Jul 19, 2024 am 04:17 AM
Menurut berita dari laman web ini pada 12 Julai, Razer hari ini mengumumkan pelancaran pad tetikus dan tetikus tanpa wayar Razer|Pokémon Gengar. Harga produk tunggal ialah 1,299 yuan dan 299 yuan, dan harga pakej termasuk kedua-dua produk ialah 1,549 yuan. Ini bukan kali pertama Razer melancarkan produk persisian jenama bersama Gengar pada 2023, Razer melancarkan tetikus permainan Yamata Orochi V2 gaya Gengar. Kedua-dua produk baharu yang dilancarkan kali ini semuanya menggunakan latar belakang ungu gelap yang serupa dengan penampilan keluarga Ghost, Ghost, dan Gengar Mereka dicetak dengan garis besar tiga Pokémon dan Poké Balls ini, dengan watak Gengar di tengah imej besar dan berwarna-warni Pokémon jenis hantu klasik. Laman web ini mendapati bahawa tetikus tanpa wayar Razer|Pokémon Gengar adalah berdasarkan Viper V3 Edisi Profesional yang dikeluarkan sebelum ini. Berat keseluruhannya ialah 55g dan dilengkapi dengan FOC generasi kedua Razer
Dalam folder manakah terletaknya pemandu tetikus Razer?
Mar 02, 2024 pm 01:28 PM
Ramai pengguna tidak tahu ke mana perginya fail yang dipasang oleh pemacu Razer mereka Fail pemacu ini biasanya dipasang pada cakera sistem, iaitu pemacu C komputer Lokasi tertentu berada dalam folder RAZE di bawah fail program. Dalam folder manakah terletaknya pemandu tetikus Razer A: Dalam folder RAZE di bawah fail program pada pemacu sistem C. Secara amnya, pemandu akan dipasang pada pemacu C, cari sahaja mengikut lokasi. Pengenalan kepada kaedah pemasangan pemacu tetikus Razer 1. Selepas memuat turun fail dari tapak web rasmi, klik dua kali untuk menjalankan fail EXE yang dimuat turun. 2. Tunggu sehingga perisian dimuatkan. 3. Di sini anda boleh memilih pemacu yang anda ingin pasang. 4. Selepas memilih, klik "Pasang" di sudut kanan bawah.
Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan
Aug 12, 2024 pm 10:45 PM
Menurut berita dari laman web ini pada 12 Ogos, VGN melancarkan siri papan kekunci dan tetikus "Elden Ring" berjenama bersama pada 6 Ogos, termasuk papan kekunci, tetikus dan pad tetikus, yang direka dengan tema tersuai bagi siri Lani/Faded One produk Ia telah diletakkan di JD.com, berharga dari 99 yuan. Maklumat produk baharu jenama bersama yang dilampirkan pada tapak ini adalah seperti berikut: Papan Kekunci VGN丨Elden Law Ring S99PRO Papan kekunci ini menggunakan cangkerang aloi aluminium tulen, ditambah dengan struktur penyenyap lima lapisan, menggunakan struktur spring daun GASKET, mempunyai satu PCB berslot kunci, dan bahan PBT tinggi asal, satah belakang diperibadikan aloi aluminium menyokong sambungan tiga mod dan teknologi kependaman rendah SMARTSPEEDX, ia boleh menguruskan berbilang peranti dalam satu hentian, bermula pada 549 yuan; VGN丨Elden French Ring F1PROMAX tetikus wayarles tetikus
Microsoft Word tidak boleh memilih atau menyerlahkan teks menggunakan tetikus
Feb 20, 2024 am 09:54 AM
Artikel ini meneroka isu yang boleh timbul apabila tetikus tidak dapat memilih atau menyerlahkan teks dalam Microsoft Word dan cara menyelesaikannya. Mengapa saya tidak boleh memilih teks dalam Microsoft Word? Ketidakupayaan untuk memilih teks dalam MSWord mungkin dipengaruhi oleh pelbagai sebab, seperti sekatan kebenaran, perlindungan dokumen, isu pemacu tetikus atau kerosakan fail. Penyelesaian kepada masalah ini disediakan di bawah. Betulkan Microsoft Word tidak boleh memilih atau menyerlahkan teks menggunakan tetikus Jika Microsoft Word tidak boleh memilih atau menyerlahkan teks menggunakan tetikus, ikut penyelesaian yang dinyatakan di bawah: Pastikan butang kiri tetikus anda berfungsi Semak jika anda layak menukar fail Kemas kini pemacu tetikus anda
Windows 10 hanya menunjukkan skrin hitam dan tetikus selepas log masuk
Dec 28, 2023 pm 04:10 PM
Sistem win10 adalah sistem yang paling biasa digunakan dalam komputer hari ini Dalam proses menggunakan sistem win10, beberapa kelemahan sistem secara beransur-ansur menjadi jelas Ramai rakan telah melaporkan bahawa desktop win10 tidak berfungsi selepas boot paparan tetapi skrin hitam dengan hanya kursor tetikus Masalah ini sebenarnya sangat mudah untuk diselesaikan! Hari ini, editor akan membawakan anda penyelesaian kepada masalah skrin hitam pada desktop Windows 10 dengan hanya tetikus Jika anda memerlukan, sila datang dan lihat. Tutorial untuk menyelesaikan masalah skrin hitam dengan hanya grafik tetikus dan teks selepas log masuk win10: Kaedah operasi: 1. Klik kanan pada menu mula dan pilih 2. Klik "Other Power Settings" 3. Klik 4 di sebelah kiri. Tentukan Butang Kuasa dan Dayakan Perlindungan Kata Laluan" " antara muka klik "Tukar arus
Apakah maksud cpi tetikus?
Feb 12, 2024 pm 09:40 PM
CPI juga dipanggil countperinch. CPI dalam tetikus ialah sensitiviti tetikus Apabila menggunakannya, semakin tinggi nombor CPI, semakin sensitif tetikus. Sekarang dalam artikel ini, editor membawakan anda pengenalan kepada fungsi butang CPI tetikus. Apakah maksud cpi? Apakah yang dimaksudkan dengan paksi x dan y? mata yang disuap balik setiap inci semasa pergerakan dinamik adalah sensitiviti tetikus. Pengenalan fungsi butang: 1. Laraskan butang kelajuan pergerakan tetikus;
