Question

我有一个可编辑的链接，如果有人悬停在该链接上，则悬停时应该有一个fa-edit图标

这是html代码

<a href="#" class="btn" id="company_name" data-type="text" data-pk="3" data-name="company_name" data-title="Enter Company Name">Learn web programming</a>&nbsp;<i class="fa fa-pencil"></i>

我想在悬停时显示fa-pencil图标

Answer 1

简单的css可以使用adjacent sibling selector(+)和:hover来解决问题。此外，我还添加了 被span包裹的html的轻微变化，以便在符号悬停图标时显示符号。

＆＃13;

a:hover +span+ i, /* when link is hovered select i */
a + span:hover+ i, /* when space after link is hovered select i */
a + span + i:hover { /* when icon is hovered select i */
  visibility: visible;
}

a +span+ i { /* in all other case hide it */
  visibility: hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<a href="#" class="btn" id="company_name" data-type="text" data-pk="3" data-name="company_name" data-title="Enter Company Name">Learn web programming</a><span>&nbsp;</span><i class="fa fa-pencil"></i>

＆＃13;

Answer 2

使用font-awesome中的unicode进行fa-pencil（朝向横幅底部），然后使用内容：＆＃39; f040＆＃39; （f040是fa-pencil的unicode）并粘贴它。

Answer 3

带有在鼠标悬停时生成的内容的字体图标。如@Rinku建议

#company_name {
        position: relative;
    }

        #company_name:hover:after {
            content: '\f040';
            font: normal normal normal 14px/1 FontAwesome;
            right: 0;
            position: absolute;
        }

和

<a href="#" class="btn" id="company_name">Learn web programming</a>

如何在悬停

3 个答案: