在 jQuery 前置后悬停未清除 IE 8 和 9 菜单项答案

【问题标题】：Hover not clearing in IE 8 & 9 menu item after jQuery prepend在 jQuery 前置后悬停未清除 IE 8 和 9 菜单项
【发布时间】：2013-08-21 17:46:17
【问题描述】：

有一个位置切换菜单，除了 IE 8/9（不针对任何旧版本），它在任何地方都可以正常工作。我基本上想要一个选择样式的对象，但不想经历自定义样式选择元素的所有麻烦。我正在使用 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>

感谢您的宝贵时间！

【问题讨论】：

问题是您使用的是 IE ... 或者您可以将您的 li.click 更改为 $('#locationselector').on('click', 'li', function(e) { $('.current').removeClass('current'); $(this).parent().prepend($(this).clone().addClass('current')); $(this).remove(); });
参考jQuery event not firing on dynamically created elements
谢谢，SpYk3HH；你加了它。我花了一些时间来实现，因为我最初使用的是 jQ 1.4.3——不得不切换到 1.8.3。然后我在其他地方使用的一些 JQ UI 坏了，所以不得不升级到 1.9.0。
那么是clone() 和remove() 有区别吗？在添加之前克隆/删除 li 可以帮助 IE 8 和 9 正常运行吗？就像敲打你的旧电视一样！
嘿，如何对原始问题的评论中提供的答案进行投票？

标签： jquery css prepend

【解决方案1】：

在 jQuery 中指定 event.target 可能会成功。

即：

$("#main").on("mouseover",function(e){

if(e.target=="Any Specific Child"){

//Do something
}

})

这也可以与mouseout,mouseenter,mouseleave 事件一起使用。

【讨论】：