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');
}
);
Try adding :hover
to this
.blue {
color: blue;
}
anon56670668:
$("#menubar>li"):hover
Tried the above and $thisLI =$('this')
to no avail.
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
@PaulOB that surely would make a difference . For me, my eyes just scan code, and hardly pays attention to typos.
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.
YES YES!!
“rem oveClass”, not “ren oveClass”
You’re my hero!
Actually you all are!
So … you’re saying removeClass
looks for the specified class and if not found it does nothing ?
That does make sense!
Yes that’s correct No need to check if its there first.
system
Closed
August 8, 2021, 5:34pm
10
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.