搜尋

首頁  >  問答  >  主體

為什麼懸停（hover）不起作用，樣式不顯示？

<p>我正在設計導航條，但是我的滑鼠懸停不起作用。當我懸停在“man”項目在我的下拉選單，它的懸停樣式，不工作，不顯示樣式在檢查。有問題嗎？這是我的 HTML 程式碼：</p> <p><br />></p> 
/* 導覽列容器 */
 身體 {
     保證金：0；
     填充：0；
     框大小：邊框框；
 }

 李{
     文字裝飾：無；
 }

 .nav-容器{
     方向：rtl；
     文字對齊：右對齊
 }

 .導覽列{
     溢出：隱藏；
     背景顏色：#333；
     字體系列：Arial；
 }

 /* 導覽列內的連結 */
 .navbar a {
     浮動：右；
     字體大小：16px；
     白顏色;
     文字對齊：居中；
     內邊距：14 像素 16 像素；
     文字裝飾：無；
 }

 /* 下拉容器 */
 。落下 {
     浮動：右；
     溢出：隱藏；
 }

 /* 下拉按鈕 */
 .dropdown .dropbtn {
     字體大小：16px；
     邊框：無；
     概要：無；
     白顏色;
     內邊距：14 像素 16 像素；
     背景顏色：繼承；
     字體：繼承；
     /* 對於手機上的垂直對齊很重要 */
     保證金：0；
     /* 對於手機上的垂直對齊很重要 */
 }


 /* 下拉內容（預設隱藏） */
 .dropdown-內容{
     顯示：無；
     位置：絕對；
     背景顏色：#f9f9f9；
     寬度：100%；
     左：0；
     框陰影：0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z 索引：1；
 }

 .dropdown:懸停 .dropdown-content {
    顯示：塊；
  }

.megamenu-容器{
    背景顏色：淺綠色；
    寬度：100%；
}

.megmenu {
    寬度：100%；
}

.megamenu-標題 {
    寬度：20%；
    背景顏色：藍色；
    顯示：內聯塊；
    內邊距：5px 15px；
    垂直對齊：頂部；
}

.megamenu-subitems-default {
    寬度：70%；
    背景顏色：藍紫色；
    顯示：內聯塊；
    內邊距：15px；
}

.megamenu-item {
    浮動：未設定！重要；
    填充：0！重要；
}

.man:hover .megamenu-subitems-default {
    可見性：隱藏；
}

#子項目{
    顯示：內聯塊；
    可見性：隱藏；
    背景顏色：黃綠色；
    寬度：70%；
}

.man：懸停#subitems {
    可見性：可見；
}

。測試 {
    顏色: 黃色;
}

.man:懸停.test {
    顏色: 小麥色;
}</前>

;
<html lang="zh-cn">
  <頭>
      <元字元集=“UTF-8”>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <元名稱=“視口”內容=“寬度=設備寬度，初始比例= 1.0”>
      <link rel="stylesheet" href="./megamenu.css">
      <標題>文檔
  </頭>

  <正文>
      <div class="nav-container">
          

              首頁
              <a href="#news">新聞</a>
              <div class="dropdown">
                  

                                      </li>
                                      <li id="女人">
                                          <a class="megamenu-item" href="#">女人</a>
                                      </li>
                                      <li id="孩子">
                                          <a class="megamenu-item" href="#">kid</a>
                                      </li>
                                  </ul>
<div class="megamenu-subitems-default"> <p>hello-default</p>
; <div class="megamenu-subitems-test" id="subitems"> <p>hello-1</p> <div class="megamenu-subitems"> <p>hello-2</p> <div class="megamenu-subitems"> <p>hello-3</p> <div class="megamenu-subitems"> <p>hello-4</p> <p class="測試">測試</p> </正文> </html></pre> <p><br />></p> <p>當我在下拉選單中的「man」項目中暫停時，它的暫停樣式不起作用，在檢查中不顯示樣式

P粉842215006P粉842215006481 天前512

全部回覆(1)我來回復

  • P粉226413256

    P粉2264132562023-08-03 18:28:06

    在您的CSS檔案中，您有這個規則：

    # 
    .man:hover #subitems {
 visibility: visible;    
}

    然而，#subitems不是.man的後代。您需要將#subitems放置在與.man相同的層級上，或作為它的後代。

    這個CSS規則指定了當.hover在具有類別.man的祖先之一上懸停時，具有id為#subitems的元素將變為可見；但是，在您的HTML中，.man是一個只有一個子元素.megamenu-item的div。

    為了隱藏預設的子項div，請嘗試替換這個選擇器：

    .man:hover .megamenu-subitems-default{
    visibility: hidden;
}

    with:

    .megamenu-title:hover ~ .megamenu-subitems-default{
    visibility: hidden;
}

    對於每個選單項目的子項，我建議您要么為每個子項div提供一個唯一的ID並使用JavaScript控制它們的可見性，要么更改您的佈局，使.megamenu-subitems div與li元素處於同一級別，並使用兄弟選擇器，或將它們作為li元素的後代。


    回覆
    0
  • 取消回覆