Question

我是jQuery的新手，我正在寻找一个简单的脚本（或者可能是一个更简单的方法），如果用户将鼠标悬停在元素上，则另一个元素的css属性会发生变化。

例如，将鼠标悬停在此图片上，另一个元素上的“border-bottom”会更改颜色或其他内容等。感谢

Answer 1

使用悬停属性

$('#elementA').hover(function(){
    $('#elementB').addClass('active');
},function(){
    $('#elementB').removeClass('active');
});

然后在你的css中设置活动类的样式

Answer 2

到目前为止你尝试了什么？

这是jQuery documentation on hover。基本上，为要悬停的对象提供一个选择器（如果你不想要永久效果，请离开）。然后，在事件的函数内，选择要更改的对象并更新其CSS settings。（或者，如果你有一个写的课程，update to the new class。）

如果您想添加一些您尝试编写的代码（更新您的帖子），我将非常乐意为您提供帮助。

Answer 3

希望这有帮助。

<html>
    <head>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#test").hover(function()
                {
                    $("#test2").css("background-color", "blue");
                }, function()
                {
                    $("#test2").css("background-color", "green");
                });
            });
        </script>
    </head>
    <body>
        <div id="test" style="border:solid 1px black;" >
            Hover Over Me
        </div>
        <br />
        <div id="test2" style="background-color:green;">
            Test2
        </div>
    </body>
</html>

jquery悬停/更改css属性帮助

3 个答案: