0

我正在尝试制作一小段脚本,当鼠标悬停在上面时会改变一串文本的颜色。

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);
});

奇怪的是,当我打开 Chromes 元素检查器时,我实际上可以看到上面元素的 RGB 值发生了变化,例如:

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

但元素实际颜色不会改变。就像外部 CSS 仍然在编写上面的内联 CSS 一样。

有人知道如何解决这个问题吗?我应该完全放弃这个元素的外部 CSS 吗?

(PS 我的 jQuery 和 UI 库都链接得很好)。

4

1 回答 1

2

这里的问题是你试图改变锚的颜色,但你实际上改变了标题的颜色。只需替换h1a它应该可以工作。

这是一个演示这一点的 jsFiddle

更新:如果您想知道,这是因为默认情况下锚不继承颜色。(参考:“a”标签何时不会继承父标签的颜色属性?

于 2012-10-08T03:18:14.430 回答