Hi, 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.
For example, hover over this image and "border-bottom" on another element changes color or something, etc. thanks
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.)
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.
use the hover property
$('#elementA').hover(function(){
$('#elementB').addClass('active');
},function(){
$('#elementB').removeClass('active');
});
then style the active class in your css
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>