Mengapa tuding tidak berfungsi dan gaya tidak muncul?
P粉842215006
2023-08-02 20:04:07
<p>Saya sedang mereka bentuk bar navigasi, tetapi alih tetikus saya tidak berfungsi. Apabila saya menuding pada item "lelaki" dalam menu lungsur saya, gaya tudingnya tidak berfungsi dan gaya itu tidak ditunjukkan dalam pemeriksa.有什么问题吗?这是我的HTML代码:</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">/* Bekas Navbar */
badan {
margin: 0;
padding: 0;
saiz kotak: kotak sempadan;
}
li {
hiasan teks: tiada;
}
.nav-container {
arah: rtl;
text-align: kanan
}
.navbar {
limpahan: tersembunyi;
warna latar belakang: #333;
font-family: Arial;
}
/* Pautan di dalam navbar */
.navbar a {
terapung: betul;
saiz fon: 16px;
warna: putih;
text-align: tengah;
padding: 14px 16px;
hiasan teks: tiada;
}
/* Bekas lungsur turun */
.dropdown {
terapung: betul;
limpahan: tersembunyi;
}
/* Butang lungsur turun */
.dropdown .dropbtn {
saiz fon: 16px;
sempadan: tiada;
garis besar: tiada;
warna: putih;
padding: 14px 16px;
warna latar belakang: mewarisi;
fon: mewarisi;
/* Penting untuk penjajaran menegak pada telefon mudah alih */
margin: 0;
/* Penting untuk penjajaran menegak pada telefon bimbit */
}
/* Kandungan dropdown (tersembunyi secara lalai) */
.dropdown-content {
paparan: tiada;
jawatan: mutlak;
warna latar belakang: #f9f9f9;
lebar: 100%;
kiri: 0;
bayang kotak: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
indeks-z: 1;
}
.dropdown:hover .dropdown-content {
paparan: blok;
}
.megamenu-container {
warna latar belakang: aqua;
lebar: 100%;
}
.megmenu {
lebar: 100%;
}
.megamenu-title {
lebar: 20%;
warna latar belakang: biru;
paparan: inline-block;
padding: 5px 15px;
vertical-align: atas;
}
.megamenu-subitems-default {
lebar: 70%;
warna latar belakang: biru ungu;
paparan: inline-block;
padding: 15px;
}
.megamenu-item {
float: unset !important;
padding: 0 !penting;
}
.man:hover .megamenu-subitems-default {
penglihatan: tersembunyi;
}
#subitems {
paparan: inline-block;
penglihatan: tersembunyi;
warna latar belakang: kuning hijau;
lebar: 70%;
}
.man:hover #subitems {
visibility: nampak;
}
.test {
warna: kuning;
}
.man:hover .test {
warna: gandum;
}</pra>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./megamenu.css">
<tajuk>Dokumen</title>
</head>
<badan>
<div class="nav-container">
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">Berita</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa-caret-down"></i>
</butang>
<div class="dropdown-content">
<div class="megamenu-container">
<div class="megmenu">
<div class="megamenu-title">
<ul>
<li >
<div class="man">
<a class="megamenu-item" href="#">man</a>
</div>
</li>
<li id="wanita">
<a class="megamenu-item" href="#">wanita</a>
</li>
<li id="kanak-kanak">
<a class="megamenu-item" href="#">kid</a>
</li>
</ul>
</div>
<div class="megamenu-subitems-default">
<p>hello-default</p>
</div>
<div class="megamenu-subitems-test" id="subitems">
<p>hello-1</p>
</div>
<div class="megamenu-subitems">
<p>hello-2</p>
</div>
<div class="megamenu-subitems">
<p>hello-3</p>
</div>
<div class="megamenu-subitems">
<p>hello-4</p>
</div>
</div>
</div>
<p class="test">test</p>
</div>
</div>
</div>
</div>
</badan>
</html></pre>
<p><br /></p>
<p>当我悬停在“lelaki”项目在我的下拉菜单，它的悬停样式不工作，不显示样式在&plt;/p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dalam fail CSS anda, anda mempunyai peraturan ini:
.man:hover #subitems { visibility: visible; }Namun, #subitems bukanlah keturunan .man. Anda perlu meletakkan #subitem pada tahap yang sama dengan .man, atau sebagai keturunannya.
Peraturan CSS ini menentukan bahawa elemen dengan id #subitems akan kelihatan apabila .hover berada di atas salah satu nenek moyangnya dengan class .man walau bagaimanapun, dalam HTML anda, .man ialah subitem dengan hanya satu The div of element .megamenu-; item.
Untuk menyembunyikan div anak lalai, cuba gantikan pemilih ini:
.man:hover .megamenu-subitems-default{ visibility: hidden; }dengan:
.megamenu-title:hover ~ .megamenu-subitems-default{ visibility: hidden; }Untuk setiap subitem item menu, saya syorkan anda sama ada memberikan setiap subitem div ID unik dan mengawal keterlihatan mereka menggunakan JavaScript, atau menukar reka letak anda supaya div .megamenu-subitems berada pada halaman yang sama dengan tahap elemen li, dan gunakan pemilih adik-beradik, atau jadikan mereka keturunan unsur li.