jquery hover selector - another way

Question

I have a set of menu like this:

<ul class="lavalamp">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>
        Menu 3
        <ul>
            <li>Sub Menu 1</li>
            <li>Sub Menu 2</li>
            <li>Sub Menu 3</li>
        </ul>
    </li>
    <li>Menu 4</li>
</ul>

I add a lavalamp effect on this. When I hover over any menu, the lavalamp background moves onto the hovered menu and it will move back to current menu if menu is not hovered.

The problem is, when I hover into the sub menus, it is considered not hovering the menu so the lavalamp background move back to the current menu item. To prevent this, I add a hover selector in my jquery.lavalamp.js like this:

$li.not(".back").hover(function() {
    if (!$('.sub-menu').is(":hover")) {
    move(this);
    }
}, function(){});

function move(el) {
    $back.each(function() {
        $(this).dequeue(); }
    ).animate({
        width: el.offsetWidth,
        left: el.offsetLeft
    }, o.speed, o.fx);
};

while move(this) is the function to move the lavalamp background to the hovered menu. It works well in every browser except in IE. The lavalamp background won't move and there is a javascript error called "unsupported pseudo :hover". I have searched in jquery site and it doesn't have a selector called :hover.

Are there any other way to replace the :hover selector above? Any help would be appreciated.

:hover is a css pseudo selector, and its not completely supported in all IE versions. Read more at quirksmode.org/css/contents.html — Mandeep Jain
– Mandeep Jain, Commented Jan 31, 2013 at 9:44
@CaptainCarl the OP is using hover, which maps to those two. That's not what they're asking about. — Barney
– Barney, Commented Jan 31, 2013 at 9:46

Barney · Accepted Answer · 2013-01-31 09:45:31Z

2

Seeing as :hover is notoriously difficult to infer statically via scripting (and older IEs don't support the pseudo class on anything other than <a>s), it's better to use the jQuery hover() method to force a real class and use that instead:

$li.hover(function(){
  $(this).toggleClass('hover');
});

Then you replace your second line,

if (!$('.sub-menu').is(":hover")) {

...with this:

if(!$(this).closest('.hover').length){

...which instead tests to see if a jQuery object looking for ancestors with the hover class returns any elements.

answered Jan 31, 2013 at 9:45

Barney

16.5k5 gold badges66 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raed Alsaleh · Accepted Answer · 2013-01-31 10:30:34Z

0

use this code, it me help you:

var previousClass = '';
var arr= $("li");
$.map(arr, function(li){
 li.mouseout(function (li) {
                    eventMouseOut(li);
                });
 li.mouseover(function (li) {
                    eventMouseOver(li);
               });
});
 function eventMouseOver(_this) {
            previousClass = $(_this).attr("class");
            $(_this).removeClass().addClass("Hover");
        }
 function eventMouseOut(_this) {

            var count = 1;
           var arr= $("li");
            $.map(arr, function (li) {
                $(li).removeClass().addClass("Normal");
                count++;
            });
        }

edited Jan 31, 2013 at 10:30

answered Jan 31, 2013 at 9:29

Raed Alsaleh

1,62110 gold badges31 silver badges50 bronze badges

Collectives™ on Stack Overflow

jquery hover selector - another way

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related