我将鼠标悬停在主菜单项上时一直在处理子菜单。我一直在尝试寻找一种不同的方式来显示相同的效果,而不会将鼠标从主菜单项缓慢移至子菜单。 (您将看到子菜单消失。)下面是jsFiddle。任何帮助将非常感激。
注意:与我的网站设计相适应,在jsFiddle上确实确实有些不同,但这无关紧要。
.header {
height: auto;
width: 70vw;
display: inline-block;
background-color: #222;
color: #fff;
padding-top: 15px;
padding-bottom: 75px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.menu {
height: auto;
width: 100%;
top: 0px;
text-align: center;
display: table;
table-layout: fixed;
background-color: transparent;
border: thin solid transparent;
border-spacing: 0px;
border-collapse: collapse;
}
.menu-item {
font-size: 14px;
font-family: poppins;
color: #9e9e9e;
padding-top: 20px;
padding-bottom: 20px;
height: auto;
width: auto;
background-color: transparent;
display: table-cell;
text-align: center;
cursor: pointer;
text-decoration: none;
}
.menu-item:hover {
color: #fff;
background-color: #ff6e00;
}
.menu div {
border-right: solid thin #333;
border-left: solid thin #333;
}
.menu div:last-child {
border-right: none;
}
.menu div:first-child {
border-left: none;
}
.sub-menu {
height: auto;
width: 100%;
display: table;
table-layout: fixed;
border-spacing: 0px;
border-collapse: collapse;
}
.sub-menu-item {
display: table-cell;
height: auto;
width: auto;
font-size: 14px;
font-family: raleway;
color: #999;
background-color: #333;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.sub-menu-item:hover {
color: #fff;
background-color: #666;
}
.sub-menu-item-icon {
height: auto;
width: auto;
padding-bottom: 20px;
text-align: center;
vertical-align: middle;
}
<div class="header">
<div class="menu">
<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 & Pricing</div>
<div class="menu-item">Testimonials</div>
<div class="menu-item">Design Hub</div>
<div class="menu-item">Contact Us</div>
</div>
<div class="sub-menu" id="sub-home" onMouseOver="document.getElementById('sub-home').style.display ='table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';">
<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';">
<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/
最佳答案
移除.menu
上的边界
.header {
height: auto;
width: 70vw;
display: inline-block;
background-color: #222;
color: #fff;
padding-top: 15px;
padding-bottom: 75px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.menu {
height: auto;
width: 100%;
top: 0px;
text-align: center;
display: table;
table-layout: fixed;
background-color: transparent;
border-spacing: 0px;
border-collapse: collapse;
}
.menu-item {
font-size: 14px;
font-family: poppins;
color: #9e9e9e;
padding-top: 20px;
padding-bottom: 20px;
height: auto;
width: auto;
background-color: transparent;
display: table-cell;
text-align: center;
cursor: pointer;
text-decoration: none;
}
.menu-item:hover {
color: #fff;
background-color: #ff6e00;
}
.menu div {
border-right: solid thin #333;
border-left: solid thin #333;
}
.menu div:last-child {
border-right: none;
}
.menu div:first-child {
border-left: none;
}
.sub-menu {
height: auto;
width: 100%;
display: table;
table-layout: fixed;
border-spacing: 0px;
border-collapse: collapse;
}
.sub-menu-item {
display: table-cell;
height: auto;
width: auto;
font-size: 14px;
font-family: raleway;
color: #999;
background-color: #333;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.sub-menu-item:hover {
color: #fff;
background-color: #666;
}
.sub-menu-item-icon {
height: auto;
width: auto;
padding-bottom: 20px;
text-align: center;
vertical-align: middle;
}
<div class="header">
<div class="menu">
<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 & Pricing</div>
<div class="menu-item">Testimonials</div>
<div class="menu-item">Design Hub</div>
<div class="menu-item">Contact Us</div>
</div>
<div class="sub-menu" id="sub-home" onMouseOver="document.getElementById('sub-home').style.display ='table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';">
<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';">
<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>
关于javascript - DIV和悬停效果的问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40544954/