箭头框转换的问题
Issue with arrow box transition
小提琴链接
问题是,当我移动光标到主菜单和子菜单之间的空间,它消失了(因为.removeClass
被触发),所以有任何方法来防止这种情况发生吗?我试图使.arrowup
采取.submenu
的全部宽度,但我不能。
把你的span改成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代码问题:我正在将对象转换为数组
- 将jQuery转换为用户脚本的普通Javascript时遇到问题
- 将HTML5模板转换为流星.js,关于js init的问题
- ember.js:转换到相同的路由会产生堆栈溢出问题
- 应用了转换时的D3js排序问题
- Podio问题:Can't将字符串转换为数字
- Javascript/Json日期转换问题
- c# mvc nreco HtmlToPdfConverter 问题将 html 文档转换为 pdf
- 数据互绑定问题:转换器只运行一次,无法绑定元素的 ID
- 为什么这不起作用?我认为这是一个转换问题
- D3-初始化后第一次转换时出现问题
- 使用php解析xml并将其转换为json以与$.ajax一起使用时遇到问题
- SVG到图像的转换问题
- jQuery-图像替换转换〔Safari中的问题〕
- 转换3D的问题
- 设置money.js(用于货币转换器)时出现问题
- 创建/使用简单的美制到公制转换器的问题.(HTML/JavaScript)函数未启动
- 问题通过'这'转换为Javascript函数
- Webkit重绘问题:转换比例+位置变化
- 有问题转换/日期(####)/到MM/dd/yyyy本地与MomentJS