0

Got a Location Switch menu that is working fine everywhere but IE 8/9 (not targeting anything older). I basically want a select-style object here, but don't want to go through all the headaches of custom-styling a select element. I'm using prepend() to move a clicked li element to the top of an unordered list. The problem is that in IE 8 and 9, the li that has been moved still seems to think it is being hovered, so the :hover styling does not clear when you mouse away from the list. You have to mouse back over the top li element to clear its :hover CSS in those browsers. (The maxWidth portion relates to dynamic content resizing and does not appear to be an issue.)

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>

Thanks for your time!

divvuk
  • 73
  • 6
  • the problem is that you're using IE ... or you could just change your `li.click` to `$('#locationselector').on('click', 'li', function(e) { $('.current').removeClass('current'); $(this).parent().prepend($(this).clone().addClass('current')); $(this).remove(); });` – SpYk3HH Aug 21 '13 at 17:51
  • Refer [jQuery event not firing on dynamically created elements](http://stackoverflow.com/a/9484335/1008278) – VenomVendor Aug 21 '13 at 17:58
  • Thanks, SpYk3HH; you spiked it. Took me a while to implement because I was originally using jQ 1.4.3 -- had to switch to 1.8.3. And then some JQ UI I was using elsewhere broke, so had to upgrade that to 1.9.0. – divvuk Aug 21 '13 at 21:03
  • So is it `clone()` and `remove()` that make the difference? Cloning/removing the li before you prepend it helps IE 8 and 9 fly right? Like whacking your old tv! – divvuk Aug 21 '13 at 21:17
  • Hey, how does one upvote an answer that was provided in a comment to the original question? – divvuk Aug 21 '13 at 21:23

1 Answers1

1

Specifying the event.target in jQuery might do the trick.

i.e: 

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

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

//Do something
}

})

This can also be used with the mouseout,mouseenter,mouseleave events.

Universal Grasp
  • 1,835
  • 3
  • 20
  • 29