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来将glyphicon显示为链接。但我不完全确定发生了什么。

Answer 1

大！你快到了。实际上，即使没有jQuery，也只能使用纯CSS来实现。只需将CSS的第一部分编辑为以下内容：

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

悬停在文本上时显示glyphicon链接

1 个答案: