CODEWITHSUNDEEP
jquerycss
Amanda Nguyen
Amanda Nguyen

Reputation: 35

How to create a mouseover effect on menu links EXCEPT for the current page?

This is the site design that I am currently working on: mailodging. I just learned jquery a few days ago and need some help.

At the moment I have a padding-left effect on my menu for the current page using jquery:

$(function(){
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$('#menu ul li a').each(function() {
if ($(this).attr('href') == pathname)
{
    $(this).addClass('currentlink');
}
});

here is the css for the 'currentlink' class

 .currentlink {
margin-left: 30px;
}

I have the same padding-left effect for menu links that you mouseover(hover).

  $(document).ready(function() {
$('.menulink').hover(function() { 
$(this).animate({ opacity: 1, marginLeft: '30px' }, 300);
}, function() { 
$(this).animate({ opacity: 0.8, marginLeft: 0 }, 200);
  });  
  });

My problem is, when you hover over the current link that you're on, it gives the link a double padding (30px for current + 30px on mouseover), which I don't want. Any ideas on how to keep the current link at the fixed margin?

Upvotes: 1

Views: 377

Answers (2)

kawashita86
kawashita86

Reputation: 1573

You can use the .not() method or :not selector:

.not method :

$('#menu ul li a').not('.currentlink ').hover(function () {} );

or css selector :

  $('#menu ul li a:not(.currentlink)').hover(function() {});

Upvotes: 1

Vivienne
Vivienne

Reputation: 600

You could try the following:

$(document).ready(function() {
    $('#menu li a[class!="currentlink"]').hover( function() {
        ...
    }, function() {
        ...
    });
});

Upvotes: 0

Related Questions