CODEWITHSUNDEEP
javascripthtmlcssaddclassonhover
vep temp
vep temp

Reputation: 267

Hover class on other elements not on selected - javascript

HTML

<div>
    <ul class="navBar"> 
        <li class="selected"><a href="#">HOME</a></li>
        <li><a href="#">WORKS</a></li>
        <li><a href="#">ARTICLES</a></li>
        <li><a href="#">ABOUT</a></li>
    </ul>
</div>

CSS

.selected{
    background-color: #CCCCCC;
}

.onHover{
    display: block;
    background-color: #0088FF;
}

JAVASCRIPT

$(function() {
        $("ul.navBar li a").hover(
            function(){
                $(this).addClass("onHover");
            },
            function(){
                $(this).removeClass("onHover");
        });
    });

What I want here is the javascript to not add 'onHover' class to the HOME link when hovered over, just the other three links.

Upvotes: 0

Views: 941

Answers (2)

Amy
Amy

Reputation: 7496

Use the jQuery :not() selector to not include the "selected" class. Also better to use event delegation .on() rather directly binding the event to elements ie. .hover().

See http://api.jquery.com/not-selector/ for more information on using :not().

$(function () {
    $(document).on('mouseenter', 'ul.navBar li:not(.selected) a', function () {
        $(this).addClass('onHover');
    });
    $(document).on('mouseleave', 'ul.navBar li:not(.selected) a', function () {
        $(this).removeClass('onHover');
    });
});

See fiddle: http://jsfiddle.net/4rZ3D/

Upvotes: 0

epascarello
epascarello

Reputation: 207557

You can use not() selector to not allow the item to be picked. 

$(function() {
    $("ul.navBar li:not(.selected) a").hover(
        function(){
            $(this).addClass("onHover");
        },
        function(){
            $(this).removeClass("onHover");
    });
});

BUT you can do this with a pure CSS only solution if you really wanted. No JavaScript is needed.

Upvotes: 1

Related Questions