Geek Answers Handbook

Jquery hover / change css property help

I'm new to jQuery, and I'm looking for a simple script (or maybe a simpler method) where, if the user is hovering over an element, another property of the css element changes.

For example, hover over this image and "border-bottom" on another element changes color or something else, etc. thanks

+6
jquery html css hover
source share
3 answers

use the hover property

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

then create an active class in your CSS

+13
source share

What have you tried so far?

The following is jQuery documentation on hover . Basically, provide a selector for the object you want to direct over (and leave it if you don't want a permanent effect). Then, inside the event function, select the object you want to modify and update its CSS settings . (Or, if you have a class to write, update a new class .)

If you want to add the code you tried to write (update the message), I would be more than happy to help you with this.

+6
source share

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>
+2
source share

More articles:


All Articles