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.