Question

当我将鼠标悬停在图片上时，不明白为什么我的链接不会显示。我确信这是非常简单的，我现在无法看到。如果有人指出我所遗漏的内容以及可能有的任何其他提示，我将非常感激。

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

我试图在悬停时显示的链接位于

之下

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

Answer 1

可能问题是<img>元素不能包含内容，但您尝试将该标记附加到其中。

您可以做的是将其附加到父母身上。

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

现在，无论如何，请注意.hover() API将导致每次鼠标移入或移出元素时都会调用您的函数。每个调用都会附加另一个 HTML块。你真的想这样做吗？

我建议您，总是在页面上标记<a>标记，并让您的.hover()处理程序显示/隐藏它。

Answer 2

您无法向img添加任何内容，但您可以在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

你能不能只将id移到包装div上？或者给包装器自己的类或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);
});

我使用了insertAfter，因为我没有知道你的其他结构，并且附加到父/包装器可能不会将它放在图像附近，而这应该是。如果需要，您还可以使用$(this).parent()选择器进行追加。

jquery悬停没有显示链接

5 个答案: