我有一个可编辑的链接,如果有人将鼠标悬停在该链接上,则悬停时应该有一个 fa fa 编辑图标
这是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>
我想仅在悬停时显示 fa fa 铅笔图标
最佳答案
简单的CSS可以使用adjacent sibling selector(+)来实现这一点和 :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>
关于jquery - 如何在悬停时显示字体很棒的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36952206/