jquery hover out

[vezzo]

i’m trying to do a little trick with jquery to make a image disappearing when hovered and showing a text under it.

everything is working fine, but i don’t know why, is not coming back to the original image when i move the mouse out.

this is the code:

Code:

$j(‘#wrapper_superouter #wrapper_outer #wrapper_inner #wrapper #bg_page #content #post #persone #persona img.fvezzoli’)
.hover(function(){ $j(this).addClass(‘elimina_img’);
$j(‘#wrapper_superouter #wrapper_outer #wrapper_inner #wrapper #bg_page #content #post #persone #persona p.fvezzoli’).addClass(‘mostra_p’);},
function(){ $j(this).deleteClass(‘elimina_img’);});

i have this class called elimina_img that is just a Css visibility: hidden.

i’m feeling so stupid ’cause it’s a basic thing, i’ve looked to some tutorials and i cant find the error.

cheers.

[vezzo]

you can see it here:

http://www.apertamente.eu/site/le-persone

thanks!

[Caramel_boy]

You can try to reveal the paragraph instead of hiding the image like so :

Code:

The paragraph you want to reveal.

Paste this into an html file and load it, I think this is the effect you are trying to achieve.

Here’s the javascript part if you just want that :

Code:

[vezzo]

thanks a lot.

i’ve tried your idea but it’s not working. since i cant set the image as a background ’cause i get the path from wordpress.

i’ve done something like that:

Code:

$j(‘#wrapper_superouter #wrapper_outer #wrapper_inner #wrapper #bg_page #content #persone #persona img.Eugenia-Grazioli’)
.hover(
function(){
$j(‘#wrapper_superouter #wrapper_outer #wrapper_inner #wrapper #bg_page #content #persone #persona #testo.Eugenia-Grazioli’).stop(true, true).fadeIn(100);
},
function(){
$j(‘#wrapper_superouter #wrapper_outer #wrapper_inner #wrapper #bg_page #content #persone #persona #testo.Eugenia-Grazioli’).stop(true, true).fadeOut(100);
});

in firebug i can see then property of the paragraph, in this case the Div #testo, change correctly, but i cant see them in the browser ’cause the img is always there. I’ve tried to combine my old script with yuors but as a result i get the image flickering when i’m hover it.

thanks a lot

Fede

[Caramel_boy]

Ok let’s see :

Do you have a reset stylesheet? If not I strongly suggest you you grab one and paste it at the top of your stylesheet.
Speaking of which, make sure that both the div and the paragraph have the same dimensions in it.

What do you mean you are getting the path from wordpress? Because it shouldn’t matter, the image should be hosted on your server regardless, it’s only a matter of grabbing it’s url.

I’ve been on your website, something happens when you hover over your image so I’m pretty sure it’s just a javascript issue, try to replace the "$j" by just "$" in your code. Also I don’t think you need to specify so many id’s to target your div. If the div you hover is #testo, then just try :

$(‘#testo’).hover("your functions here");

Hope it helps.

[vezzo]

"Caramel_boy" wrote:

Ok let’s see :

Do you have a reset stylesheet? If not I strongly suggest you you grab one and paste it at the top of your stylesheet.
Speaking of which, make sure that both the div and the paragraph have the same dimensions in it.

What do you mean you are getting the path from wordpress? Because it shouldn’t matter, the image should be hosted on your server regardless, it’s only a matter of grabbing it’s url.

I’ve been on your website, something happens when you hover over your image so I’m pretty sure it’s just a javascript issue, try to replace the "$j" by just "$" in your code. Also I don’t think you need to specify so many id’s to target your div. If the div you hover is #testo, then just try :

$(‘#testo’).hover("your functions here");

Hope it helps.

yes of course i have a reset.
there was some difference in the wrappers dimensions, i’ve modified them now.
I’ve put the text before the img now.
take a loot at it…
it’s flickering when the mouse is over, and you can see a bit of the image right under the main wrapper.

this is the code:

Code:

$j(‘#persona img.Eugenia-Grazioli’)
.hover(
function(){
$j(‘#persona #testo.Eugenia-Grazioli’).stop(true, true).fadeIn(100);
},
function(){
$j(‘#persona #testo.Eugenia-Grazioli’).stop(true, true).fadeOut(100);
});

thanks alot…

[vezzo]

I finally solved it!
i got the flickering effect cause i was triggering the fade out on the image and not on the wrapper!

thanks a lot for you help…

[Caramel_boy]

Well glad I could help man! Happy to see that it works.

[Author]

Posts