如何在悬停时显示超棒的字体图标
How to show font awesome icon on hover
我有一个可编辑的 link,如果有人悬停在上面 link 悬停时应该有一个 fa 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> <i class="fa fa-pencil"></i>
我只想在悬停时显示铅笔图标
使用 font-awesome 中的 unicode for fa-pencil(靠近横幅底部),然后使用内容:'f040'(f040 是 fa-pencil 的 unicode)并粘贴。
简单 css 可以使用 adjacent sibling selector(+) and :hover
来解决问题。此外,我在 html 中添加了细微的变化,即
被 span
包裹,以便在它悬停在图标上时使符号可见。
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;
}
<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> </span><i class="fa fa-pencil"></i>
Fontawesome 图标,悬停时生成的内容..正如@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>
我有一个可编辑的 link,如果有人悬停在上面 link 悬停时应该有一个 fa 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> <i class="fa fa-pencil"></i>
我只想在悬停时显示铅笔图标
使用 font-awesome 中的 unicode for fa-pencil(靠近横幅底部),然后使用内容:'f040'(f040 是 fa-pencil 的 unicode)并粘贴。
简单 css 可以使用 adjacent sibling selector(+) and :hover
来解决问题。此外,我在 html 中添加了细微的变化,即
被 span
包裹,以便在它悬停在图标上时使符号可见。
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;
}
<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> </span><i class="fa fa-pencil"></i>
Fontawesome 图标,悬停时生成的内容..正如@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>