DIV和悬停效果问题

问题描述：

我一直在研究子菜单，当我将鼠标悬停在主菜单项上时。我一直试图找出一种不同的方式来显示相同的效果，而不会将问题缓慢地移动到主菜单项的子菜单中。（你会看到子菜单消失。）下面是jsFiddle。任何帮助将非常感激。DIV和悬停效果问题

注意：它确实在jsFiddle上看起来与我的网站设计略有不同，但这是无关紧要的。

.header { 
 
\t height: auto; 
 
\t width: 70vw; 
 
\t 
 
\t display: inline-block; 
 
\t 
 
\t background-color: #222; 
 
\t \t 
 
\t color: #fff; 
 
\t 
 
\t padding-top: 15px; 
 
\t padding-bottom: 75px; 
 
\t 
 
\t border-top-left-radius: 10px; 
 
\t border-top-right-radius: 10px; 
 
} 
 
.menu { 
 
\t height: auto; 
 
\t width: 100%; 
 
\t 
 
\t top: 0px; 
 
\t 
 
\t text-align: center; 
 
\t 
 
\t display: table; 
 
\t table-layout: fixed; 
 
\t 
 
\t background-color: transparent; 
 
\t 
 
\t border: thin solid transparent; 
 
\t 
 
\t border-spacing: 0px; 
 
\t border-collapse: collapse; 
 
} 
 
.menu-item { 
 
\t font-size: 14px; 
 
\t font-family: poppins; 
 
\t \t 
 
\t color: #9e9e9e; 
 
\t 
 
\t padding-top: 20px; 
 
\t padding-bottom: 20px; 
 
\t 
 
\t height: auto; 
 
\t width: auto; 
 
\t 
 
\t background-color: transparent; 
 
\t 
 
\t display: table-cell; 
 
\t 
 
    text-align: center; 
 
\t 
 
\t cursor: pointer; 
 
\t 
 
\t text-decoration: none; 
 
} 
 
.menu-item:hover { 
 
\t color: #fff; 
 
\t background-color: #ff6e00; 
 
} 
 
.menu div { 
 
\t border-right: solid thin #333; 
 
\t border-left: solid thin #333; 
 
} 
 
.menu div:last-child { 
 
\t border-right: none; 
 
} 
 
.menu div:first-child { 
 
\t border-left: none; 
 
} 
 

 

 

 
.sub-menu { 
 
\t height: auto; 
 
\t width: 100%; 
 
\t 
 
\t display: table; 
 
\t table-layout: fixed; 
 
\t 
 
\t border-spacing: 0px; 
 
\t border-collapse: collapse; 
 
} 
 
.sub-menu-item { 
 
\t display: table-cell; 
 
\t 
 
\t height: auto; 
 
\t width: auto; 
 
\t 
 
\t font-size: 14px; 
 
\t font-family: raleway; 
 
\t 
 
\t color: #999; 
 
\t background-color: #333; 
 
\t 
 
\t padding-top: 20px; 
 
\t padding-bottom: 20px; 
 
\t 
 
\t cursor: pointer; 
 
} 
 
.sub-menu-item:hover { 
 
\t color: #fff; 
 
\t background-color: #666; 
 
} 
 
.sub-menu-item-icon { 
 
\t height: auto; 
 
\t width: auto; 
 
\t 
 
\t padding-bottom: 20px; 
 
\t 
 
\t text-align: center; 
 
\t 
 
\t vertical-align: middle; 
 
}

<div class="header"> 
 
\t 
 
    <div class="menu"> 
 
    \t 
 
    \t <div class="menu-item" onMouseOver="document.getElementById('sub-home').style.display = 'table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';">Home</div> 
 
     
 
     <div class="menu-item" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';" onMouseOut="document.getElementById('sub-pricing').style.display = 'none';">Plans &amp; Pricing</div> 
 
     <div class="menu-item">Testimonials</div> 
 
     <div class="menu-item">Design Hub</div> 
 
     <div class="menu-item">Contact Us</div> 
 
    \t 
 
    </div> 
 
    
 
    <div class="sub-menu" id="sub-home" onMouseOver="document.getElementById('sub-home').style.display ='table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';"> 
 
    \t 
 
    \t <div class="sub-menu-item">About Us</div> 
 
     <div class="sub-menu-item">Our Mission</div> 
 
     
 
    </div> 
 
    
 
    <div class="sub-menu" id="sub-pricing" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';" onMouseOut="document.getElementById('sub-pricing').style.display = 'none';"> 
 
    \t 
 
    \t <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Website Hosting</div> 
 
     <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Email Hosting</div> 
 
     <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Domain Names</div> 
 
     <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Other Services</div> 
 
     
 
    </div> 
 
    
 
</div>

https://jsfiddle.net/oqjwvv8m/

答

删除边框ON YOUR .menu

.header { 
 
\t height: auto; 
 
\t width: 70vw; 
 
\t 
 
\t display: inline-block; 
 
\t 
 
\t background-color: #222; 
 
\t \t 
 
\t color: #fff; 
 
\t 
 
\t padding-top: 15px; 
 
\t padding-bottom: 75px; 
 
\t 
 
\t border-top-left-radius: 10px; 
 
\t border-top-right-radius: 10px; 
 
} 
 
.menu { 
 
\t height: auto; 
 
\t width: 100%; 
 
\t 
 
\t top: 0px; 
 
\t 
 
\t text-align: center; 
 
\t 
 
\t display: table; 
 
\t table-layout: fixed; 
 
\t 
 
\t background-color: transparent; 
 
\t 
 
    
 
\t 
 
\t border-spacing: 0px; 
 
\t border-collapse: collapse; 
 
} 
 
.menu-item { 
 
\t font-size: 14px; 
 
\t font-family: poppins; 
 
\t \t 
 
\t color: #9e9e9e; 
 
\t 
 
\t padding-top: 20px; 
 
\t padding-bottom: 20px; 
 
\t 
 
\t height: auto; 
 
\t width: auto; 
 
\t 
 
\t background-color: transparent; 
 
\t 
 
\t display: table-cell; 
 
\t 
 
    text-align: center; 
 
\t 
 
\t cursor: pointer; 
 
\t 
 
\t text-decoration: none; 
 
} 
 
.menu-item:hover { 
 
\t color: #fff; 
 
\t background-color: #ff6e00; 
 
} 
 
.menu div { 
 
\t border-right: solid thin #333; 
 
\t border-left: solid thin #333; 
 
} 
 
.menu div:last-child { 
 
\t border-right: none; 
 
} 
 
.menu div:first-child { 
 
\t border-left: none; 
 
} 
 

 

 

 
.sub-menu { 
 
\t height: auto; 
 
\t width: 100%; 
 
\t display: table; 
 
\t table-layout: fixed; 
 
\t border-spacing: 0px; 
 
\t border-collapse: collapse; 
 
} 
 
.sub-menu-item { 
 
\t display: table-cell; 
 
\t 
 
\t height: auto; 
 
\t width: auto; 
 
\t 
 
\t font-size: 14px; 
 
\t font-family: raleway; 
 
\t 
 
\t color: #999; 
 
\t background-color: #333; 
 
\t 
 
\t padding-top: 20px; 
 
\t padding-bottom: 20px; 
 
\t 
 
\t cursor: pointer; 
 
} 
 
.sub-menu-item:hover { 
 
\t color: #fff; 
 
\t background-color: #666; 
 
} 
 
.sub-menu-item-icon { 
 
\t height: auto; 
 
\t width: auto; 
 
\t 
 
\t padding-bottom: 20px; 
 
\t 
 
\t text-align: center; 
 
\t 
 
\t vertical-align: middle; 
 
}

<div class="header"> 
 
\t 
 
    <div class="menu"> 
 
    \t 
 
    \t <div class="menu-item" onMouseOver="document.getElementById('sub-home').style.display = 'table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';">Home</div> 
 
     
 
     <div class="menu-item" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';" onMouseOut="document.getElementById('sub-pricing').style.display = 'none';">Plans &amp; Pricing</div> 
 
     <div class="menu-item">Testimonials</div> 
 
     <div class="menu-item">Design Hub</div> 
 
     <div class="menu-item">Contact Us</div> 
 
    \t 
 
    </div> 
 
    
 
    <div class="sub-menu" id="sub-home" onMouseOver="document.getElementById('sub-home').style.display ='table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';"> 
 
    \t 
 
    \t <div class="sub-menu-item">About Us</div> 
 
     <div class="sub-menu-item">Our Mission</div> 
 
     
 
    </div> 
 
    
 
    <div class="sub-menu" id="sub-pricing" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';" onMouseOut="document.getElementById('sub-pricing').style.display = 'none';"> 
 
    \t 
 
    \t <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Website Hosting</div> 
 
     <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Email Hosting</div> 
 
     <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Domain Names</div> 
 
     <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Other Services</div> 
 
     
 
    </div> 
 
    
 
</div>

LOL我不能相信我忽略了！这是令人尴尬的哈哈哈感谢队友:) – Jesse

当我通过相关的子菜单时，我将如何将主菜单项设置为其“悬停”状态？ – Jesse

你的子菜单应该是主菜单项的子项。或者您可以设置子菜单的悬停来触发菜单项 – GvM

答

哟在您的<div class="menu">上有边框。所以当你将光标移动到子菜单时，你会在它们之间的边界上点击，而不再将鼠标悬停在菜单上，因此子菜单消失。

为了解决这个问题，将它添加到你的CSS（在你的菜单的戈巴托删除边框）：

.menu { 
    ... 
    border: thin solid transparent; 
    border-bottom: 0px; /* ADDED */ 
    ... 
}

见jsfiddle

感谢队友。我不敢相信我忽略了那个笑声 – Jesse

DIV和悬停效果问题

相关推荐