Question

好的，这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
    <title>The Down-Champlain Regatta</title>
    <link rel="stylesheet" href="homepage.css"/>
    <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
</head>
<body>
    <div id="topcontainer">
        <img src="Images/Kim.jpg" id="tom">
        <img src="Images/Kim.jpg" id="zach">

        <div id="head">
            <p id="a">Hello South Burlington. We're the</p>
            <h5>Down Champlain Regatta.</h5>
            <p id="s">And we've got a bold new plan for sailing education on Lake Champlain.</p>
        </div>

        <div id="down">
            <p>check it out</p>
        </div>
    </div>

    <div id="container">
        <h5>Here's What We're Doing</h5>
        <p class="beginning">The most important thing in sailing is experience. Read all the books you want - you'll still need time on the water.</p>
        <p>The Down Champlain Regatta is a non-profit organization designed to give students, if nothing else, tons of time on the water. Its three weeks of all-weather keelboat sailing on Lake Champlain, something not offered in many other places, will teach students more than anything else can.</p>
        <p>This course is not for new sailors. It's for kids who know how to sail, but want to take it to the next level. It's for kids who want to move up into the world of keelboat racing.</p>
        <p>And at the end of the course, they do just that. The course finishes with an all-day, student-led race down Lake Champlain. This is a unique opportunity for the students to apply their newly learned skills, build confidence, and get exposure in the racing community. </p>

    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#down").mouseover(function(){
                $("#down").animate({backgroundColor: "#1363bf"}, 2000)
            });

            $("#down").mouseout(function(){
                $("#down").animate({backgroundColor: "#e03535"}, 250)
            });

            $("#down").click(function(){
                $("html, body").animate({
                    scrollTop: $("#container").position().bottom+"px"
                }, 800)
            });
        });
    </script>
</body>
</html>

基本上，有一个div，我想让它在鼠标悬停时改变颜色。

看，问题是.mouseover正在检测它内部的div和段落（＆＃34;检查出来＆＃34;）。因此，当您将鼠标悬停在div和段落上时，它会通过颜色更改TWICE运行。有没有办法解决？也许使用.mouseover以外的东西？

这是dwreck08的更新代码：

    $("#down").mouseover(function(){
        $("#down").not("p").animate({backgroundColor: "#1363bf"}, 2000)
    });

    $("#down").mouseout(function(){
        $("#down").not("p").animate({backgroundColor: "#e03535"}, 250)
    });

Answer 1

正如@Albin的评论所述，我还建议使用css3过渡来实现这一目标。如果您愿意，您仍然可以使用jquery来切换它：JS Fiddle

 $("#down").mouseover(function () {
     $("#down").css('background', 'blue');
 });

$("#down").mouseout(function () {
     $("#down").css('background', 'red');
 });


#down {
    transition: 1s;
}
#down:hover {
    transition: 2s;
}

使用jQuery更改Div颜色的问题

1 个答案: