Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Author Topic: JQuery: hiding an element when :hover  (Read 3410 times)

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
JQuery: hiding an element when :hover
« on: April 22, 2010, 11:29:02 AM »

Hello hello
that one should be easy but I can't make it working and I don't get why since I have no error....

I'm trying to hide a span (or a div, doesn't matter) when the cursor is over an image...

This is my HTML:
Code: [Select]
<figure class="vitrine">
<a href="#"><img src="my-image.jpg" alt="" width="400" height="400"  /></a>
<figcaption>
<p><span class="foo"><a href="http://my-domain">My domain/</a></span>
My blah blah...</p></figcaption>
</figure>

Of course I got the latest JQuery framework on...

and I tried to hide the foo span this way:
Code: [Select]
$("figure.vitrine").hover(
function(){
$(this).find("span.foo").css("display","none");
}
);

I've tried with mouseenter ($("figure.vitrine").mouseenter) with no effect.
Even with the span outside the figure tag it doesn't work...
Bah bah bah... where am I wrong?
« Last Edit: April 22, 2010, 11:34:30 AM by Sven »
Logged

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: JQuery: hiding an element when :hover
« Reply #1 on: April 22, 2010, 12:10:54 PM »

Why not try (untested...)

Code: [Select]
$("figure.vitrine").hover(
function(){
$(".foo").hide()
}
);
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: JQuery: hiding an element when :hover
« Reply #2 on: April 22, 2010, 12:19:26 PM »

Howdee Jason...
tested here and nope ???

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: JQuery: hiding an element when :hover
« Reply #3 on: April 22, 2010, 01:13:21 PM »

This works (if I understand you correctly), but I am unsure why you want this:
Code: [Select]
<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<figure class="vitrine">
<a href="#"><img src="my-image.jpg" alt="" width="400" height="400" /></a>
<figcaption>
<p><span class="foo"><a href="http://my-domain">My domain/</a></span>My blah blah...</p>
</figcaption>
</figure>
<script>
$("figure.vitrine img").hover( // I added the img to this
function(){
$(".foo").hide()
}
);
</script>
</body>
</html>
« Last Edit: April 22, 2010, 01:23:37 PM by nukpana »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: JQuery: hiding an element when :hover
« Reply #4 on: April 22, 2010, 01:44:23 PM »

This works (if I understand you correctly), but I am unsure why you want this:
Yes it works!
I was placing the script before the body and didn't think a minute to move it down as you  done.
There it's real fine.
But img is not needed and I had to revert to previous state with:
Code: [Select]
,
function(){
$(this).find("span.foo").css("display","block");
}
under the previous lines.
 8)
And a karma for Jason!