我将鼠标悬停在主菜单项上时一直在处理子菜单。我一直在尝试寻找一种不同的方式来显示相同​​的效果,而不会将鼠标从主菜单项缓慢移至子菜单。 (您将看到子菜单消失。)下面是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 &amp; 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 &amp; 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/

10-12 12:55
查看更多