Question

有人看到我的代码有什么问题吗？我只是想不出来!!

文件路径是正确的，如果我在悬停h3元素时查看控制台，它会在“悬停”中输出文本，就像它应该的那样。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS box</title>
    <link href="style.css" rel="stylesheet" media="screen" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/" src="jquery.color.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box h3').mouseover(function() {
                console.log('hover');
                $('#box h3').stop(true, true).animate({
                    backgroundColor: '#E4A333'
                }, 200);
            });
        });
    </script>
</head>
<body>

<div id="box">
    <h3><a href="#">Lorem ipsum dolor sit amet.</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing consectetur lectus, sed mollis ante dictum id. Nunc magna neque, ornare ac interdum at, pharetra vel leo. Morbi placerat, orci ut sollicitudin dictum, nisi eros feugiat tortor, ac ultricies est leo ac est. Suspendisse justo urna, porttitor eget adipiscing dictum, malesuada nec diam.</p>
</div>

</body>
</html>

假设改变背景颜色。不幸的是，它不起作用:(

此处有实时链接:(已删除）（最有可能在几个小时内删除）

Answer 1

您的颜色插件的脚本标记格式错误：

<script type="text/" src="jquery.color.js"></script>

应该是：

<script type="text/javascript" src="jquery.color.js"></script>

目前，好像jQuery.color插件不存在，因为它没有包含在页面中。

Answer 2

讨厌给你破解，但我复制了你的确切源代码并更改了你的脚本链接以直接链接到你的javascripts（即<script type="text/javascript" src="http://nike1.se/box/jquery-1.4.2.min.js"></script>），它在我的机器上按预期工作。

我怀疑问题出在您的测试页上的语句中：

<script type="text/javascript" src="/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/jquery.color.js"></script>

您的脚本实际上位于/box子目录中。源链接可能是src="query-1.4.2.min.js"或src="/box/jquery-1.4.2.min.js"。或者，根据您的Web服务器配置，您可能需要像我一样包含完整路径，或使用BASE element正确设置文档的基本目录。

Answer 3

在尝试对元素进行动画处理之前，您必须已经为元素应用了背景颜色。尝试在函数调用之前将背景颜色应用于css中的元素或通过js。

jQuery动画背景颜色 - 不工作

3 个答案: