jQuery Hover to Fill Div

Ok, so what I'm trying to do is:
When I hover over a <li> in an image carousel I made, I want an information panel (".label") to fill with information from a <p> within that <li>. Here's the basic structure of the HTML:

HTML Code:

---

<div class="gallery">
  <ul>
    <li>
      <img ... />
      <p>Information</p>
    </li>
    <!-- Repeat li -->
  </ul>
  <div class="label"></div>
</div>

---

And here's the jQuery I've written:

Code:

---

$('.gallery ul > li').hover(
        function(){
            $('.label').html($(this).children('p')).fadeIn('fast');
        },
        function(){
            $('.label').fadeOut('fast');
        }
    );

---

Now, everything works just fine, but only the first time you hover over each <li>. After that, it only fades in the <div>, but there's no HTML. I suspect it has to do with the use of "this" in the 3rd line, but I'm not sure and if it does I have no idea how else to do it.

$(this).children('p').html()

I'm trying to pull HTML from the <p> into the div. Slap me if I'm wrong, but I don't think that'd do it.

So you want the p tag itself as well?

$(this).children.eq(1) maybe.

I don't need the tag itself. I guess I'm having a hard time explaining what I need. Each <li> has an image and a paragraph. The paragraph is hidden. It's in the <li> to keep them grouped together and more easily selectable. There is a div after the list. What I'm trying to do is use JS to insert the contents of the paragraph into the div that's after the list when the list item is hovered.

All of that works, but only the first time you hover each <li>. Each subsequent time you hover the <li>, the div shows, but is empty.

Illustration. What I need is for blocks 1 & 2 in the below image to be the only states. However, once you've hovered once, subsequent hovers look like block 3 in the image.
Attachment 2614
I have something in place that's adequate for now, and since this is a personal project, that's ok. However, I'd really like to figure this out if anyone has any ideas on why it isn't working properly. I'm getting much better with JS, but I wouldn't even know how to begin troubleshooting something like this.

I'd have to see the code in action, dude. I got nothing otherwise. It looks like it should work.

Sent you a PM.

Quote:

---

Originally Posted by Ronald Roe, post: 243603

Illustration. What I need is for blocks 1 & 2 in the below image to be the only states. However, once you've hovered once, subsequent hovers look like block 3 in the image.
Attachment 3621
I have something in place that's adequate for now, and since this is a personal project, that's ok. However, I'd really like to figure this out if anyone has any ideas on why it isn't working properly. I'm getting much better with JS, but I wouldn't even know how to begin troubleshooting something like this.

---

Try giving each p tag a class, and call the class in the javascript.
If you just call the p tag, it will only show your first p, since then the conditions of the script are met.
You could adapt something from this - http://www.brightcherry.co.uk/scribb...-next-element/

As it turns out, .html() removes the original p, so it isn't there to insert into the div. I haven't had a chance to work on the new solution, for which I have a suggestion, but that's what the problem is.