有一个 Location Switch 菜单,除了 IE 8/9(不针对任何更旧的版本)外,它在任何地方都可以正常工作。我基本上想要一个 select-style 对象在这里,但不想经历所有自定义样式的 select 元素的麻烦。我正在使用 prepend() 将点击的 li 元素移动到无序列表的顶部。问题是在 IE 8 和 9 中,已移动的 li 似乎仍然认为它正在悬停,因此当您将鼠标从列表中移开时,:hover 样式不会清除。您必须将鼠标移回顶部 li 元素才能清除其在这些浏览器中的 :hover CSS。 (maxWidth 部分与动态调整内容大小有关,似乎不是问题。)
HTML:
<div id="locationselector">
<ul>
<li class="current">Home</li>
<li>Banf</li>
<li>Pago Pago</li>
</ul>
</div>
jQuery:
<script type="text/javascript">
$(document).ready(function() {
var maxWidth = Math.max.apply( null, $( '#locationselector li' ).map( function () {
return $( this ).outerWidth( true );
}).get() );
$("#locationselector").width(maxWidth + 37);
$('#locationselector li').click(function(e) {
e.preventDefault();
$('#locationselector li.current').removeClass('current');
$(this).parent().prepend(this);
$(this).addClass('current');
});
});
</script>
CSS:
<style type="text/css">
#locationselector {
background: url(http://zgraphicsdev.com/stackoverflow/location-switch-bg.png) no-repeat;
height: 30px;
display: inline-block;
margin: -10px 5px;
position: relative;
border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .3);
}
#locationselector ul {
height: 30px;
margin: 3px 0 0 27px;
padding: 0;
list-style-type: none;
position: absolute;
overflow: hidden;
}
#locationselector ul:hover {
background-color: #d9d9d9;
overflow: visible;
height: auto;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .3);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .3);
}
#locationselector ul li {
background-color: transparent;
color: #494949;
font-family: "museo-sans", "Museo Sans 500", sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 14px;
padding: 6px 3px;
margin: 0;
white-space: nowrap;
text-align: left;
cursor: pointer;
}
#locationselector ul li:hover {
background-color: #FFFFFF;
}
#locationselector ul li.current {
color: #FFFFFF;
}
#locationselector ul li.current:hover {
color: #494949;
}
#locationselector ul:hover li.current {
color: #494949;
}
</style>
感谢您的宝贵时间!
最佳答案
在 jQuery 中指定 event.target 可能会成功。
即:
$("#main").on("mouseover",function(e){
if(e.target=="Any Specific Child"){
//Do something
}
})
这也可以与 mouseout
、mouseenter
、mouseleave
事件一起使用。
关于jquery - 在 jQuery 前置后悬停不清除 IE 8 和 9 菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18364293/