Comments on: Quick Tip - Set Hover Class for Anything

By: Jeronemo

Jeronemo — Wed, 06 Aug 2008 12:37:11 +0000

I have one question remaining. I wondered if this works with a form button. I would like the form button to hover in IE. I tried to replace the p element by button but it doenst work?! I also tried to replace it by a class.. same result. Any idea?

By: Jeronemo

Jeronemo — Wed, 06 Aug 2008 12:23:42 +0000

Yeah, that’s it! So that’s why other jquery things didnt work either. Thanks alot ^^

By: Karl Swedberg

Karl Swedberg — Wed, 06 Aug 2008 12:17:57 +0000

Hi Jeronemo, I think the only problem your script has is that it isn't wrapped in a document ready function. Try it this way instead:

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

See Introducing document ready for details.

By: Jeronemo

Jeronemo — Wed, 06 Aug 2008 11:38:10 +0000

ehh that did not go as planned. Heres a link to my website.

Thanks!

By: Jeronemo

Jeronemo — Wed, 06 Aug 2008 11:32:54 +0000

Hi there,

This is a great tutorial. But for some reason i can’t get it to worl. I tested it with
Firebug and i can see the class=”pretty-hover” is not added to the p element. So i guess it’s the javascript. I read this tutorial for about 20 times. Did i miss something?

Here’s my code:


	Test
		$('#hover-demo1 p').hover(function() {

		  $(this).addClass('pretty-hover');

		}, function() {

		  $(this).removeClass('pretty-hover');

		});		
		.pretty-hover, #hover-demo1 p:hover {

 			 background: #ff0;

		}
		My car has four weels!

Thanks alot in advantage!

By: Slava

Slava — Wed, 23 Jul 2008 14:57:09 +0000

Phil, thank you! You saved a lot of my time. I had the same problem but didn`t manage to cope with it. Your solution works great!

By: Phil Leitch

Phil Leitch — Wed, 02 Jul 2008 00:32:49 +0000

I thought hover would solve my problem but it doesn’t seem to. I have an overlay that I want to display if I hover over the image. What happens is if I try anything other than hide/show the effect repeats.

Hover and slideUp gives me the overlay sliding up, sliding down, sliding up, and so on. This is what happened when using mouseover, mouseout and based on the description for hover would solve that.

my code
$('#widescreen_box').hover( function () { $('#overlay').slideUp('slow'); }, function () { $('#overlay').slideDown('slow'); } );

By: Michael Robinson

Michael Robinson — Fri, 27 Jun 2008 15:07:40 +0000

Great tutorial, thanks a lot.

I’ve used Java a lot, and found it to be fairly straight-forward. Javascript on the other hand…. Resources like your webpage have helped me create some pretty fun things that I wouldn’t have bothered attempting otherwise.

Keep it up!

By: dan

dan — Thu, 24 Apr 2008 20:37:40 +0000

awesome tutorial. this is exactly what I was looking for to ensure that each paragraph on my wordpress site gets highlighted when the mouse hovers over.

required adding the script tag to the header.php of my theme and thats it

By: Donna Vitan

Donna Vitan — Wed, 02 Apr 2008 15:40:31 +0000

This tutorial was on point and I was able to successfully implement this after a bit of time. I’m not a programmer at all and I’m finding jQuery easier to handle with simple things like this. Thanks so much Karl.