Question

I am trying to make a short piece of script that changes the colour of a string of text when hovered over.

HTML:

<span class="headinglink" id="firstheading"><h1><a href="http://localhost/page.php">Link1</a></h1></span>

JavaScript:

$('#firstheading').hover(function () {
        $(this).find('h1').stop().animate({ color: "#53799E" }, 1000);
    }, function() {
    $(this).find('h1').stop().animate({ color: "#F58426" }, 1000);
});

The weird thing is that when I open Chromes element inspector I can actually see the RGB value of the element above change is it should eg:

<h1 style="color: rgb(245, 132, 38); ">

But the elements actual colour does not change. Its like the external CSS is still over writing the inline CSS above.

Would anyone know how to get around this? Should I be ditching the external CSS for this element altogether?

(P.S I have both jQuery and UI libraries linked fine).

Answer 1

The trouble here is that you’re trying to change the color of the anchor, but you’re actually changing the color of the heading. Simply replace h1 with a and it should work.

Here’s a jsFiddle that demonstrates this.

UPDATE: In case you’re wondering, this is because anchors don’t inherit color by default. (ref: when will "a" tag not inherit color attribute of parent tag?)