Comments on: Change the Style of DIV on Mouseover with jQuery http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/ Web design tips & tricks plus anything else I want to talk about... Mon, 15 Mar 2010 14:51:38 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Tom http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-28149 Tom Thu, 28 Jan 2010 17:41:09 +0000 http://www.stemkoski.com/?p=1061#comment-28149 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 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

]]> By: Steve Wanless http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-20848 Steve Wanless Wed, 12 Aug 2009 17:03:29 +0000 http://www.stemkoski.com/?p=1061#comment-20848 @BJ why dont you post a link to the page? or send me a link to it - my first name at my website @BJ why dont you post a link to the page? or send me a link to it – my first name at my website

]]> By: BJ http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-20847 BJ Wed, 12 Aug 2009 17:02:49 +0000 http://www.stemkoski.com/?p=1061#comment-20847 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... 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…

]]> By: Steve Wanless http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-20846 Steve Wanless Wed, 12 Aug 2009 17:00:45 +0000 http://www.stemkoski.com/?p=1061#comment-20846 oops... it stripped out my code. div class="current" link end div I guess I shouldn't have pasted HTML code into the comment. :) oops… it stripped out my code.

div class=”current” link end div

I guess I shouldn’t have pasted HTML code into the comment.

:)

]]> By: Steve Wanless http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-20845 Steve Wanless Wed, 12 Aug 2009 16:59:10 +0000 http://www.stemkoski.com/?p=1061#comment-20845 @BJ I use PHP and add a class to the nav item for the current page. ie. <a href="#" rel="nofollow">NAVIGATION ITEM 1</a> 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. @BJ I use PHP and add a class to the nav item for the current page.

ie.
NAVIGATION ITEM 1

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.

]]> By: BJ http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-20844 BJ Wed, 12 Aug 2009 16:56:15 +0000 http://www.stemkoski.com/?p=1061#comment-20844 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. 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.

]]> By: Ryan Stemkoski http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-20843 Ryan Stemkoski Wed, 12 Aug 2009 16:48:16 +0000 http://www.stemkoski.com/?p=1061#comment-20843 @BJ The theory behind the above code is we're modifying the CSS style of the DIV on mouseover. So on mouseover the div class changes from sidenavOff to sidenavOver. So if you created a class for both .sidenavOff and .sidenavOver (They don't have to be div specific) then it should work sweet. The other thing I will mention is this solution uses jQuery selectors so you must include the jQuery library for it to work. You can do this by putting the following code in the head section of your HTML document: <pre lang="javascript"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> </pre> @BJ The theory behind the above code is we’re modifying the CSS style of the DIV on mouseover. So on mouseover the div class changes from sidenavOff to sidenavOver. So if you created a class for both .sidenavOff and .sidenavOver (They don’t have to be div specific) then it should work sweet.

The other thing I will mention is this solution uses jQuery selectors so you must include the jQuery library for it to work. You can do this by putting the following code in the head section of your HTML document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
]]> By: BJ http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-20842 BJ Wed, 12 Aug 2009 16:39:04 +0000 http://www.stemkoski.com/?p=1061#comment-20842 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? 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?

]]> By: Chuck http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-17834 Chuck Thu, 11 Jun 2009 13:23:21 +0000 http://www.stemkoski.com/?p=1061#comment-17834 Just what I needed. Short and to the point! Just what I needed. Short and to the point!

]]> By: bundle http://www.stemkoski.com/change-the-style-of-div-on-mouseover-with-jquery/comment-page-1/#comment-14520 bundle Wed, 22 Apr 2009 22:27:48 +0000 http://www.stemkoski.com/?p=1061#comment-14520 Thank you! Thank you! Thank you! Thank you! Thank you! Thank you!

]]>