jQuery hover help

JavaScript
1

I have really tried, but jQuery’s hover command has really got me and could use some insight - the alerts show, but the .red and .blue foreground colors do not show.

NOTE: I realize using jQuery for a simple onmouseover and onmouseout is over-kill … but, I am just trying to learn about jQuery.

HTML:

<ul id="menubar">
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>

CSS:

.red {
	color: red;
}

.blue {
	color: blue;
}

SCRIPT:


$("#menubar>li").hover (
	function () {
		alert("in");
	
		$thisLI = $(this);
		if ( $thisLI.hasClass('blue') ) {
			$thisLI.removeClass('blue');
		}
		$thisLI.addClass('red');	
	}, 
	function () {
		alert("out");
	
		$thisLI = $(this);
		if ( $thisLI.hasClass('red') ) {
			$thisLI.removeClass('red');
		}
		$thisLI.addClass('blue');	
	}
);
2

Try adding :hover to this

.blue {
	color: blue;
}
3

Tried the above and $thisLI =$('this') to no avail.

4

Look in the console and what do you see?

Uncaught TypeError: $thisLI.renoveClass is not a function

Do you think there may be a typo there? How do you spell remove?

1 Like
5

@PaulOB that surely would make a difference :slight_smile:. For me, my eyes just scan code, and hardly pays attention to typos.

6

You don’t need the added check either as you can simply remove the class.

e.g.

$("#menubar>li").hover(
  function () {
    //alert("in");
    $thisLI = $(this);
    $thisLI.removeClass("blue");
    $thisLI.addClass("red");
  },
  function () {
    // alert("out");
    $thisLI = $(this);
    $thisLI.removeClass("red");
    $thisLI.addClass("blue");
  }
);

However that is still overkill and you don’t really need two classes just swap one class and add and remove it.

$("#menubar>li").hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);

#menubar li {color: blue;}
#menubar li.hover{color:red;}

Of course you would never use js to change color on hover but just for practice purposes its ok. :slight_smile:

7

YES YES!!
“removeClass”, not “renoveClass”

You’re my hero!

Actually you all are!

8

So … you’re saying removeClass looks for the specified class and if not found it does nothing ?

That does make sense!

9

Yes that’s correct :slight_smile: No need to check if its there first.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.