简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Why doesn't hover work and styles don't show up?
P粉842215006
P粉842215006 2023-08-02 20:04:07
0
1
494
<p>I'm designing a navigation bar, but my mouseover isn't working. When I hover over the "man" item in my dropdown menu, its hover style is not working and the style is not shown in the inspector.有什么问题吗?这是我的HTML代码:</p> <p><br /></p> <pre class="brush:css;toolbar:false;">/* Navbar container */ body { margin: 0; padding: 0; box-sizing: border-box; } li { text-decoration: none; } .nav-container { direction: rtl; text-align: right } .navbar { overflow: hidden; background-color: #333; font-family: Arial; } /* Links inside the navbar */ .navbar a { float: right; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* The dropdown container */ .dropdown { float: right; overflow: hidden; } /* Dropdown button */ .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ } /* Dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .megamenu-container { background-color: aqua; width: 100%; } .megmenu { width: 100%; } .megamenu-title { width: 20%; background-color: blue; display: inline-block; padding: 5px 15px; vertical-align: top; } .megamenu-subitems-default { width: 70%; background-color: blueviolet; display: inline-block; padding: 15px; } .megamenu-item { float: unset !important; padding: 0 !important; } .man:hover .megamenu-subitems-default { visibility: hidden; } #subitems { display: inline-block; visibility: hidden; background-color: yellowgreen; width: 70%; } .man:hover #subitems { visibility: visible; } .test { color: yellow; } .man:hover .test { color: wheat; }</pre> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html lang="en"> <head> <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"> <title>Document</title> </head> <body> <div class="nav-container"> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <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="woman"> <a class="megamenu-item" href="#">woman</a> </li> <li id="kid"> <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> </body> </html></pre> <p><br /></p> <p>当我悬停在“man”项目在我的下拉菜单，它的悬停样式不工作，不显示样式在Inspect</p>
P粉842215006
P粉842215006

reply all(1)
P粉226413256
P粉2264132562023-08-03 18:28:06 1 floor

In your CSS file you have this rule: 

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

However, #subitems are not descendants of .man. You need to place #subitems on the same level as .man, or as a descendant of it.

This CSS rule specifies that an element with id #subitems will become visible when .hover is over one of its ancestors with class .man; however, in your HTML, .man is a A div that is a child element of .megamenu-item.

To hide the default child div, try replacing this selector: 

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

with:

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

For each menu item's subitems, I recommend that you either give each subitem div a unique ID and control their visibility using JavaScript, or change your layout to make the .megamenu-subitems div with the li element be at the same level and use sibling selectors, or make them descendants of the li element.


Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！