如何顯示懸停字體真棒圖標

我有一個鏈接，可編輯，如果有人鏈接上懸停應該有懸停如何顯示懸停字體真棒圖標

這裏，發發編輯圖標的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 fa鉛筆圖標

來源

2016-04-30 Aniket Singh

簡單的CSS可以使用adjacent sibling selector(+)和:hover來實現。此外，我添加了dim的細微變化， 由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>&nbsp;</span><i class="fa fa-pencil"></i>

來源

2016-04-30 07:43:17

在fa-pencil（朝向橫幅底部）的字體-awesome中使用unicode，然後使用內容：'f040'（f040是fa-pencil的unicode）並粘貼。

來源

2016-04-30 07:42:59

如何顯示懸停字體真棒圖標

回答

相關問題