將鼠標懸停在文本上顯示圖形鏈接

Question

因此，當鼠標懸停在文本上時，出現圖形鏈接時出現問題。

我在我的html中有這個div。

<div class="editable container"> 
<h1>File Name: filename<a href="#"><span class="pencil glyphicon glyphicon-pencil"></span></a></h1> 
</div> 

有了這個CSS和JS。
CSS：

.editable span.pencil{ 
float: right; 
} 

.editable h1 .pencil{ 
display: none; 
} 

JS：

$(document).ready(function(){ 
    $('.editable h1').hover(function(){ 

$(this).children('span.pencil').css({'display' : 'inline-block'}); 
    },function(){ 

$(this).children('span.pencil').css({'display' : 'none'}); 
    }); 
}); 

的想法是，當我將鼠標懸停在文本「文件名：文件名」鉛筆glyphicon應該出現在最右邊的容器（其中應該是一個鏈接）。

但我一直在遇到這個問題，這不起作用，但如果我刪除'a'標籤它會工作。但到目前爲止，我發現得到的鏈接工作，唯一的解決辦法是改變
$（「可編輯H1‘）
到
$（’。可編輯一個」）
同時加入某種文本'a'標籤之間。但是接下來我必須將這些文字懸停在h1的其餘部分上。

我想通過突出顯示h1將圖形顯示爲鏈接。但我不完全確定發生了什麼。

Answer 1

太棒了！你幾乎在那裏。實際上，即使沒有jQuery，也可以使用純CSS。只需編輯您的第一部分CSS到以下內容：

.editable h1:hover .pencil { 
    float: right; 
    display:block; 
}