<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
标签 javascript jquery html css
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
问题是,当我将光标移动到主菜单和子菜单之间的空间时,它消失了(因为 .removeClass
被触发),那么有什么办法可以防止它从发生?我试图让 .arrowup
占据 .submenu
的整个宽度,但我做不到。
最佳答案
将您的跨度更改为 li。
添加一个伪来增加 ul>li 的高度,这样它就不会在尝试到达子菜单时丢失悬停事件。
http://jsfiddle.net/rptdou2y/7
$(document).ready(function () {
$('.headermain').hover(
function () {
$('.headersub').addClass("headermainopen");
},
function () {
$('.headersub').removeClass("headermainopen");
});
});
body {
background-color: #b7b7b7;
}
/***Header**/
#header {
width: 95%;
margin: auto;
}
#header>ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 20px;
-webkit-display: flex;
-moz-display: flex;
-o-display: flex;
display: flex;
justify-content: flex-start;
background-color: #17243e;
margin:10px auto;
direction: rtl;
}
#header> ul>li {
color: #ffffff;
height: 70px;
background-color: #17243e;
flex: 0 1 auto;
z-index: 1;
width: 8em;
position: relative;
}
#header> ul>li:after {
content:'';
padding-bottom:20px;
display:block;
}
#header> ul> li>a:hover {
color:#17243e;
background-color: #ffffff;
}
#header> ul>li+li {
border-right: 1px solid #ffffff;
}
#header>ul>li> a {
display: block;
line-height: 70px;
-webkit-transition: background-color 0.5s, color 0.5s ease;
-moz-transition: background-color 0.5s, color 0.5s ease;
transition:background-color 0.5s, color 0.5s ease;
}
.headersub {
position: absolute;
list-style-type: none;
padding: 0;
width: 10em;
right: 50%;
transform: translateX(50%);
border-radius: 5px;
margin-top: 0px;
background-color: #ffffff;
opacity: 0;
-webkit-transition: margin-top 0.3s, opacity 0.3s ease;
-moz-transition: margin-top 0.3s, opacity 0.3s ease;
transition: margin-top 0.3s, opacity 0.3s ease;
}
.headersub li a {
color: #17243e;
display: block;
line-height: 2em;
}
.headersub .arrowup {
position: absolute;
transform: translateY(-100%);
right:50%;
}
.headermainopen {
opacity: 1;
margin-top: 10px;
}
.headermain .arrowup {
width: 0;
height: 0;
border-bottom: 10px solid white;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
a:visited, a:link {
color:white;
text-align:center;
text-decoration:none;
}
/***Header**/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="header">
<ul>
<li><a href="#0">Text</a>
</li>
<li class="headermain"><a href="#0">Text</a>
<ul class="headersub">
<li class="arrowup"></li>
<li><a href="#0">Text</a>
</li>
<li><a href="#0">Text</a>
</li>
</ul>
</li>
关于javascript - 箭头框过渡问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32426945/