jquery 悬停/更改 css 属性帮助
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3391005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery hover/change css property help
提问by Mike
I'm new to jQuery and I'm looking for a simple script (or maybe there's a simpler method) where if a user hovers over an element, another element's css property changes.
我是 jQuery 的新手，我正在寻找一个简单的脚本（或者可能有更简单的方法），如果用户将鼠标悬停在一个元素上，另一个元素的 css 属性会发生变化。
For example, hover over this image and "border-bottom" on another element changes color or something, etc. thanks
例如，将鼠标悬停在此图像上，另一个元素上的“边框底部”会更改颜色或其他内容，等等。谢谢
回答by wowo_999
use the hover property
使用悬停属性
$('#elementA').hover(function(){
$('#elementB').addClass('active');
},function(){
$('#elementB').removeClass('active');
});
then style the active class in your css
然后在你的 css 中设置活动类的样式
回答by JasCav
What have you tried so far?
你都尝试了些什么？
Here is the jQuery documentation on hover. Basically, provide a selector to the object that you want to hover over (and leave, if you don't want a permanent effect). Then, inside the event's function, select the object that you want changed and update its CSS settings. (Or, if you have a class for it written, update to the new class.)
这是有关 hover的jQuery 文档。基本上，为您想要悬停的对象提供一个选择器（如果您不想要永久效果，请离开）。然后，在事件的函数内，选择要更改的对象并更新其CSS 设置。（或者，如果您已经编写了一个类，请更新到新类。）
If you want to add some code that you have tried to write (update your post), I would be more than happy to help you with it.
如果您想添加一些您尝试编写的代码（更新您的帖子），我将非常乐意为您提供帮助。
回答by Brandon Boone
Hope this helps.
希望这可以帮助。
<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>
