您好我的页面上有一个简单的css悬停菜单,但在使用触摸设备时似乎无法在IE10上运行。
这个问题有解决办法吗?
HTML:
<ul class="Menu">
<li>
<a href="javascript:void(0);">First</a>
<ul>
<li>
<a href="#1" class="Active">1</a>
</li>
<li>
<a href="#2">2</a>
</li>
<li>
<a href="#3">3</a>
</li>
<li>
<a href="#4">4</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Second</a>
<ul>
<li>
<a href="#5">5</a>
</li>
<li>
<a href="#6">6</a>
</li>
<li>
<a href="#7">7</a>
</li>
<li>
<a href="#8">8</a>
</li>
</ul>
</li>
</ul>
CSS:
.Menu, .Menu ul {
list-style: none;
display: block;
margin: 0;
}
.Menu > li {
float: left;
padding-bottom: 1px;
margin: 0 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.Menu > li:hover, .Menu > li:active {
position: relative;
}
.Menu li a {
display: block;
color: #000000;
text-decoration: none;
}
.Menu > li > a {
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: transparent;
}
.Menu > li > a:hover, .Menu > li > a:active {
border-bottom-color: #A9A9A9;
}
.Menu li > ul {
margin-top: 0px;
/* to ensure that we dont leave the ul and the hovering effect stops */
border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
box-shadow: 0px 0px 3px #888;
padding: 0px 2px 2px 2px;
background-color: White;
position: absolute;
left: -4000px;
/* Hack to fix animation */
min-width: 100%;
opacity: 0;
transition: opacity 0.2s linear;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
}
.Menu li:hover > ul, .Menu li a:active + ul {
left: -4px;
z-index: 100;
opacity: 1;
}
.Menu li ul > li {
border-left-style: solid;
border-left-width: 3px;
border-left-color: transparent;
padding: 0 3px;
margin: 3px 0;
white-space: nowrap;
}
.Menu li ul > li:hover, .Menu li ul > li:active {
border-left-color: #A9A9A9;
}
.Menu li ul > li.Active {
border-left-color: black;
}
答案 0 :(得分:3)
每次使用:focus
时,您都可以添加:hover
,这样可以使菜单与标签和移动设备配合使用。
希望这能帮到你。
编辑:注意:您可以更好地隐藏折叠打开的菜单,并使其在悬停和焦点上可见。现在点击标签的方式仍将通过“隐形”链接。而且,遗憾的是,它们现在不会降低焦点。
解决方案?:我做了一些努力并找到了“修复”。 This jsFiddle应该有效。但是仍然应该在其他CSS规则中添加:focus
以使样式在所有情况下都正常。当“下拉”中的链接成为焦点时,菜单应保持打开状态。 (但我不认为这会在移动设备上造成任何问题。)
我刚改变了一点CSS:
.Menu li a:hover + ul,
.Menu li a:focus + ul,
.Menu li a:active + ul
{
left: -4px;
z-index: 100;
opacity: 1;
}
注意'+'。
答案 1 :(得分:3)
Win8上的IE 10似乎有一个通过aria属性的解决方案:http://msdn.microsoft.com/en-us/library/jj152141%28v=vs.85%29.aspx
“在具有切换交互式内容可见性的悬停行为的页面元素上,将元素的aria-haspopup属性设置为”true“”
“当启用触摸的设备上的Internet Explorer 10用户首先点击页面元素时,用户的体验将与使用光标悬停在元素上的用户的体验相同。在用户点击页面上的其他位置之前,点击另一个元素,或导航到另一个页面,该元素保持其悬停状态。此外,第一次点击页面元素时不会执行onclick事件的默认操作(如链接导航)。“