CODEWITHSUNDEEP
jqueryhover
Ray
Ray

Reputation: 12441

How do I use jquery to achieve hover effect on a link that is normally done with css :hover to change the link's color

How do I use jquery to achieve hover effect on a link that is normally down with css :hover, so when I hover over a link it changes to a different color, and when my mouse leaves the link it returns to the color it had before?

Edit My link has an inline style that sets its color, so I tried add and remove class they don't work, it seems the newly added css class cannot override the inline style.

Upvotes: 1

Views: 3293

Answers (2)

Ali
Ali

Reputation: 12684

A simple way just use jQuery.hover():

$('a#mylink').hover(function(){$(this).toggleClass("underline");},function(){$(this).toggleClass("underline");});

or

$('a#mylink').hover(function(){$(this).css("text-decoration","underline");},function(){$(this).css("text-decoration","none");});

Upvotes: 3

griegs
griegs

Reputation: 22770

use the mouseenter and mouseleave events.

$("#linkname").mouseenter(function(){
$(this).addClass("highlight");
});

$("#linkname").mouseleave(function(){
$(this).removeClass("highlight");
});

mouseover, mouseout will also work.

for the link you can use the id with the # or class name with the .

so

so you can then use;

$("#anchorid").mouseleave(

or

$(".anchorclass").mouseleave(

Upvotes: 2

Related Questions