jquery懸停沒有顯示鏈接

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將導致每次鼠標.hover()或移出元素時都會調用函數。 每個調用都會附加另一個 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()選擇器進行追加。