jquery懸停不顯示鏈接

不理解爲什麼我的鏈接不會顯示時，我將鼠標懸停在圖像上。我確信這是非常簡單的事情，我目前無法看到。如果有人指出我錯過了什麼以及其他任何提示，我會非常感激。jquery懸停不顯示鏈接

$("#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>

來源

2012-12-06 Octavius

你可以將'id =「profilepic」'移動到包裝div上？ –

可能出現的問題是<img>元素不能有內容，但你要追加該標記到它。

你可以做的是將其附加到父項。

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

但是現在，你這樣做，注意.hover() API將導致你的函數被每一次叫，在進出元素的鼠標移動。每次調用將附加另一個塊的HTML。你真的想這麼做嗎？

我建議，相反，你總是有的頁面上<a>標籤，而你讓你的.hover()處理顯示/隱藏它。

來源

2012-12-06 15:19:35 Pointy

好的，謝謝，不知道不使用的後果。 – Octavius

你不能追加任何東西給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); 
    });

來源

2012-12-06 15:19:51

是的，這也是工作。 – Pointy

我不知道如果鏈接將可點擊如果懸停移動圖像 - 鏈接將被刪除... –

我說同樣的擔心，我怎麼才能點擊鏈接？ – Octavius

你能不能把id移動到wrapper 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>')); 
});

來源

2012-12-06 15:20:28

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

來源

2012-12-06 15:21:55 Chris

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

我用insertAfter因爲我沒有你的其他結構的knowlege，並追加到父/包裝可能不會把它放在靠近圖像，而這應該。如果需要，您也可以使用$(this).parent()選擇器進行追加。

來源

2012-12-06 15:26:59

jquery懸停不顯示鏈接

回答

相關問題