Ie Select Issue with Hover

IE select issue with hover

I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.

You can however work around it with Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $('.nav_element a').mouseover(function() {
            $('.submenu').hide();
            $(this).parent().find('.submenu').show();
        });

        $('.submenu').mouseover(function() {
            $(this).show();
        });

        $('.submenu').mouseout(function (e) {
            // Do not close if going over to a select element
            if (e.target.tagName.toLowerCase() == 'select') return;
            $(this).hide();
        });

    });    
</script>

The code above uses jQuery.

JQuery/Javascript: IE hover doesn't cover select box options?

Apparently IE doesn't consider the drop down bit part of the select element. It's doable, but it takes a bit of cheating with expando properties and blur/focus events to enable and disable the 'hide' effect to stop it kicking in when the mouse enters the drop-down part of the element.

Have a go with this:

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

(Apologies if this isn't how one is supposed to use jQuery - I've never used it before :))

CSS issue: a:hover not working with IE (css Ninja needed)

First thing I'd do is double check that the order of the psuedo selectors is correct.

It should be-

a:link {color:#FF0000} /* unvisited link */  
a:visited {color:#00FF00} /* visited link */  
a:hover {color:#FF00FF} /* mouse over link */  
a:active {color:#0000FF} /* selected link */  

The only specific IE hover issue I remember relates to non-link elements so I don't think that is your issue. http://www.bernzilla.com/item.php?id=762 - Just in case.

If that doesn't answer your question do you mind posting the related block of css?

---

GAH- That was a hard one!

It looks like IE is breaking because the links don't have an associated Href element. Fix that and you should be fine.

--Breaking News - I may be an idiot- That was the last thing I changed on my test page and that fixed it but when I put it all back together it broke everywhere... so take what I just posted with a grain of salt. I'm backing up to see what happened.

IE8 bug - CSS a:hover attribute not working

This issue was due to the position:relative on the .header-nav ul li a tag... I have no idea why IE8 couldn't handle this (and IE7 could!). My fix was to simulate the relative positioning by just making the line-height attribute larger (and adding a *line-height to account for differences in the IE7 rendering).

If anyone has any insight on why this issue was caused I'd love to hear it!

Hope this helps future confused front-end devs that are stuck accounting for older versions of IE...

IE CSS Hover Issue with Facebook/Twitter/+1 Buttons

Problem fixed by using javascript to manually add and remove a class named 'hover' on mouseOver and mouseOut. I applied the same style to .hover class instead of :hover

JS:

var articleOver = function(){
    $(this).addClass('hover');
}
var articleOut = function(){
    $(this).removeClass('hover');
}

$('li').hover(articleOver, articleOut);

CSS:

li:hover .pinkBar{display:block;}//old method
li.hover .pinkBar{display:block;}//new method

Tooltipster hover select and option not working in IE

Fixed it and updated the Plunker with the fix.

The problem wasnt just with tooltipster its with how IE implements the selectbox.
You can fix it by adding the event.stopPropagation too the select.

Default fix:

$(document).ready(function(){
  $("select").mouseleave(function(event){
    event.stopPropagation();
  });
});

By fixing this in your tooltipster you need too add the following too the the functionReady of the tooltipster

Tooltipster fix:

functionReady: function(origin) {
    origin.tooltipster('content').find('select').each(function() {
        jQuery(this).mouseleave(function(event){
            event.stopPropagation();
        });
    });
}

---

Related Topics