Comments on: Quick Tip – Set Hover Class for Anything

By: TomB

TomB — Mon, 01 Feb 2010 16:10:53 +0000

I want to set the hover class for a thumbnail but also for some subject related text in a ul on the same page. When you hover on the thumbnail a simultaneous class change occurs for both the thumbnail and a particular line of text within the ul. Can you direct me to a source to see how this can be done?

By: SlappyTheFish

SlappyTheFish — Fri, 13 Nov 2009 07:16:48 +0000

Perhaps this is of some help:

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

It uses jQuery to create an inline stylesheet, so you’re able to achieve basically any CSS styling that you can with a normal stylesheet.

By: 78 jQuery Scenarios to Fall in Love | ProgrammerFish - Everything that's programmed!

Thu, 08 Oct 2009 03:12:58 +0000

[...] 50) Set hover class for anything [...]

By: miss chohoh

miss chohoh — Sat, 22 Aug 2009 06:27:49 +0000

I really need your help or someone’s help.

this is what im trying to do to ..

look at this link firefox or safari.
http://www.chohoh.com/pcs/hover.example.html

I need everything to look and function the way this does but it doesn’t work in IE6
I used the suckerfish :hover for this and it just doesn’t work properly with nested lists.

this is now what im trying to do with jquery.
http://www.chohoh.com/pcs/hoverthing.html

i thought it would be nest to shift gears but now I’m totally stuck on this and can’t figure out why my hover isn’t working.

if i can just get this to work with jquery and have it work in ie6 it’s smooth sailing. but im in a real bind at the moment. i’ve been working on this for 4 days now!

any help, advice is appreciated !!!
hope to hear from someone soon

-lb

By: In de reeks “Vloeken op”; Internet Explorer 6 | futtta's blog

In de reeks “Vloeken op”; Internet Explorer 6 | futtta's blog — Tue, 02 Jun 2009 08:12:44 +0000

[...] in Wordpress zit, besef ik nu pas, al schrijvende. Misschien Suckerfish er toch terug uit en de jQuery-oplossing in de plaats, één dezer [...]

By: Karl Swedberg

Karl Swedberg — Thu, 23 Apr 2009 20:21:01 +0000

Actually, the example shows how to set it for all p tags within #hover-demo2. To apply it to all list items with an unordered list that has an id of "selector," you would do it like this:

$('#selector li').hover(function() {
  $(this).addClass('pretty-hover');
}, function() {
  $(this).removeClass('pretty-hover');
});

Or, for all list items within any unordered list:

$('ul li').hover(function() {
  $(this).addClass('pretty-hover');
}, function() {
  $(this).removeClass('pretty-hover');
});

By: Mr JQ

Mr JQ — Thu, 23 Apr 2009 19:47:27 +0000

Great piece of code!!

Your example shows how to set for specific object.. How would I set for all #selector li tags of an unordered list without specifying an ID for every li.. Thanks in advance..

By: padma

padma — Wed, 11 Mar 2009 13:06:29 +0000

Thank You for all the help It works fine

By: Karl Swedberg

Karl Swedberg — Tue, 10 Mar 2009 18:43:24 +0000

If that's all you're including, then you must be getting an error. Sorry, I guess the article isn't explicit enough. Include the jQuery core file first:

In your jqueryglobal.js file, wrap your script in a document ready block:

$(document).ready(function() {
  $('#hover-demo').hover(function() {
    $(this).addClass('pretty-hover');
  }, function() {
    $(this).removeClass('pretty-hover');
  });
});

For more information, see Introducing $(document).ready().

By: padma

padma — Tue, 10 Mar 2009 17:55:22 +0000

$(‘#hover-demo2 p’).hover(function() {
$(this).addClass(‘pretty-hover’);
}, function() {
$(this).removeClass(‘pretty-hover’);
});

My jquery code file has only this nothing other than that. No the mouseover color change dosent’ work there is no javascript error.