javascript - 将鼠标悬停在文本上时显示字形链接

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'});
    });
});   

这个想法是，当我将鼠标悬停在文本“文件名:文件名”上时，容器的最右侧应该出现一个铅笔字形图标(应该是一个链接)。

但是我遇到了这个不起作用的问题，但如果我删除“a”标签，它就会起作用。但到目前为止，我发现使链接正常工作的唯一解决方案是更改
$('.editable h1')
到
$('.editable a')
同时在“a”标签之间添加某种文本。但随后我必须将鼠标悬停在该文本与 h1 的其余部分上。

我希望通过在 h1 上突出显示来将字形显示为链接。但我不完全确定发生了什么。

Answer 1

太棒了!你就快到了。实际上，即使没有 jQuery，仅使用纯 CSS 也可以实现这一点。只需将 CSS 的第一部分编辑为以下内容:

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