Change the Style of DIV on Mouseover with jQuery
JavaScript libraries are fantastic. I know many good web developers who have been reluctant to learn more JavaScript than they absolutely need to. I admit JavaScript can be confusing but it is a very powerful tool, especially with the power of AJAX. Below are a couple simple examples of very powerful techniques that can be achieved very quickly and cleanly using jQuery.
Example 1: Change the Style of a DIV element on Mouseover
Lists are a great tool for navigations but many times they don’t work or are too difficult to style. Lets say you wanted to make a vertical navigation out of DIV elements but you wanted them to change styles on rollover. Your HTML may look something like:
<div id="leftColumn"> <div class="sidenavOff"><a href="#">NAVIGATION ITEM 1</a></div> <div class="sidenavOff"><a href="#">NAVIGATION ITEM 2</a></div> <div class="sidenavOff"><a href="#">NAVIGATION ITEM 3</a></div> <div class="sidenavOff"><a href="#">NAVIGATION ITEM 4</a></div> </div>
Very simple and clean. Notice there is no inline JavaScript for the rollover effect. The beauty of jQuery is it can handle events for elements without nasty inline JavaScript. Here is the jQuery JavaScript to add rollover effects to this navigation:
$("div.sidenavOff").mouseover(function(){ $(this).removeClass().addClass("sidenavOver"); }).mouseout(function(){ $(this).removeClass().addClass("sidenavOff"); });
Easy aye? Analyzing the code you can see simple mouseover and mouse out functions where we’re removing the current class and adding the proper one for the time in the event. This will effect any DIV with the class of .sidenavOff on mouseover.
Example 2: Including HTML content in a Page using jQuery and Ajax
Suppose we had a div on our page with the ID of #lookup. When clicked #lookup1 we wanted the content from a file called search.htm to load in another DIV with the id #lookupContent.
With HTML you could link to a new HTML file that had this adjustment made. With standard JavaScript you could make a very lengthy AJAX request to load the page or with jQuery you can do it with ease. For example:
$('#lookup').click(function() { $('#lookupContent').load('search.htm'); });
This code will load the file search.htm and replace the contents of #lookupContent with whatever is in the search.htm file. Cake.
I will give a few more, simple jQuery examples in the near future. I am trying to convince as many developers as I can to take a look at the various JavaScript frameworks. There is a reason they’re such a hot topic these days.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
I can’t get this to work to save my life. I must be doing something silly. Is it a requirement that the style be for a div only ie: div.sidenavOff. Even that isn’t working for me.
@steve This works great but how can you make it stick once that nav item is selected?
Understood. I’m using jquery for some other things on my new site but this just isn’t working. I tried it on another page to see if there was a conflict but it was no go. I guess I’ll figure it out eventually. Again…it seems so simple. I’m doing much more complicate things and this just isn’t happening.
@BJ I use PHP and add a class to the nav item for the current page.
Is that what you were after?
The upside to a using jQuery is with some minor mods to the above code you can get a rollover here to change some div etc on the other side of the page.
I’m working on a site where the client wants a rollover on thumbnails to change an image within the header of the page. jQuery is great for stuff like that.
oops… it stripped out my code.
div class=”current” link end div
I guess I shouldn’t have pasted HTML code into the comment.
In theory can I put an alert trace in the inmouse over function? Should that fire when I mouse over to see if it’s even getting the event listener applied? I’m just trying to narrow down if it’s a css issue or a js issue or both…
How would I use this idea to trigger a change of class for a single li element within a list but when doing mouseover on an entirely different object(div) on the page. newbie
Hey,
It’s great!!
I used these trick with some other jQuery code and It’s working great in my website.
Here you can see http://www.travelcareharidwar.in(In language selection button).
Thanks..
The only thing better than inline JavaScript is no JavaScript at all.
…
/* CSS */
#leftColumn div {
}
#leftColumn div:hover {
}
Same amount of CSS and no javascript to it still works for those few that choose not to enable JS. And those few IE6 users, well… they don’t really need a rollover effect anyway
Nice simple example though, and I’m sure there are times where this will be useful.