jQuery前置后IE 8&9菜单项中的悬停未清除
有一个位置开关菜单,在任何地方都可以正常工作,但IE 8/9没有针对任何旧的。我基本上希望这里有一个选择样式对象,但不想经历自定义选择元素样式的所有麻烦。我使用prepend将单击的li元素移动到无序列表的顶部。问题是,在IE8和IE9中,移动的li似乎仍然认为它正在悬停,因此:hover样式在鼠标移离列表时不清楚。在这些浏览器中,您必须将鼠标移回顶部的li元素以清除其:hover CSS。maxWidth部分与动态内容大小调整相关,似乎不是问题 HTML: jQuery: CSS:jQuery前置后IE 8&9菜单项中的悬停未清除,jquery,css,prepend,Jquery,Css,Prepend,有一个位置开关菜单,在任何地方都可以正常工作,但IE 8/9没有针对任何旧的。我基本上希望这里有一个选择样式对象,但不想经历自定义选择元素样式的所有麻烦。我使用prepend将单击的li元素移动到无序列表的顶部。问题是,在IE8和IE9中,移动的li似乎仍然认为它正在悬停,因此:hover样式在鼠标移离列表时不清楚。在这些浏览器中,您必须将鼠标移回顶部的li元素以清除其:hover CSS。maxWidth部分与动态内容大小调整相关,似乎不是问题 HTML: jQuery: CSS: 谢谢你的时
谢谢你的时间 在jQuery中指定event.target可能会起到作用 i、 e:
这也可以用于mouseout、mouseenter、mouseleave事件。问题是您正在使用IE。。。或者您可以将li.click更改为$'locationselector'。单击“li”,函数{$'.current.removeClass'current';$this.parent.prepend$this.clone.addClass'current';$this.remove;};谢谢,世爵;你给它加了钉子。我花了一段时间来实现,因为我最初使用的是JQ1.4.3-必须切换到1.8.3。然后我在其他地方使用的一些JQ用户界面坏了,所以不得不升级到1.9.0。那么,是克隆和删除造成了不同吗?在你准备之前克隆/删除li有助于IE 8和9正常运行?就像把你的旧电视机砸了一样!嘿,一个人如何投票给在对原始问题的评论中提供的答案?
<div id="locationselector">
<ul>
<li class="current">Home</li>
<li>Banf</li>
<li>Pago Pago</li>
</ul>
</div>
<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>
<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>
$("#main").on("mouseover",function(e){
if(e.target=="Any Specific Child"){
//Do something
}
})