jquery hover not showing link

Question

Not understanding why my link won't show up when I hover over an image. I'm sure it is something very simple that I am unable to see at this time. I would be very appreciative if someone pointed out what I'm missing as well as any other tips one may have.

$("#profile_pic").hover(
        function () {
            $(this).show($('<a id="duh" href="upload.php">Change the picture</a>'));
        }
);

The link I'm trying to get to show on hover is below

<div>
    <img id= "profile_pic" src="<?php echo $picture;?>" width="164" height="164" />
</div>

Answer 1

Probably the issue is that <img> elements can't have content, yet you're trying to append that markup to it.

What you could do is append that to the parent.

$("#profile_pic").hover(
        function () {
            $(this).closest('div').append($('<a id="duh" href="upload.php">Change the picture</a>'));
        });

Now, however you do this, note that the .hover() API will result in your function being called each time that the mouse moves in or out of the element. Each call will append another block of HTML. Do you really want to do that?

I suggest that, instead, you always have that <a> tag on the page, and that you make your .hover() handler show/hide it.

Answer 2

You can't append anything to img, but you can insert link next to your img.

$("#profile_pic").hover(
   function () {
    var link = $("#duh");
    link = link.length ? link : $('<a id="duh" href="upload.php">Change the picture</a>');
    $(this).after(link);
   });

Answer 3

Can you not just move the id onto the wrapper div? Or give the wrapper it's own class or id?

<div id="profile_pic">
    <img src="<?php echo $picture;?>" width="164" height="164" />
</div>​

.

$("#profile_pic").hover(
    function () {
    $(this).append($('<a id="duh" href="upload.php">Change the picture</a>'));
 });​

Answer 4

$("#profile_pic").hover(
            function () {
                $(this).after($('<a id="duh" href="upload.php">Change the picture</a>'));
});

Answer 5

$("#profile_pic").hover(function () {
    $('<a id="duh" href="upload.php">Change the picture</a>').insertAfter(this);
});

I used the insertAfter as I do not have knowlege of your other structure, and appending to the parent/wrapper might not put it in close proximity to the image whereas this should. You could also use the $(this).parent() selector to append if needed.