將鼠標懸停在另一個對象上的顯示圖標

-4

我希望我的鏈接在鼠標懸停時在旁邊顯示字體超讚的圖標。整條生產線看起來是這樣的：將鼠標懸停在另一個對象上的顯示圖標

<a href="#" class="link">link</a> <span class="someicon"></span>

如何使班「someicon」上課時「鏈接」懸停可見？

編輯：

謝謝大家，我想出了一個更好的解決方案。不需要額外的類和DOM元素：

.link:hover::after { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    content: "\00a0\f040"; 
    text-decoration: none; 
}

來源

2016-08-13 kurtgn

這是基本的CSS。

.someicon { 
 
    display: none; 
 
} 
 
.link:hover + .someicon { 
 
    display: inline-block; 
 
}

<a href="#" class="link">link</a> <span class="someicon">i'm an icon</span>

，雖然我個人做的圖標部分的鏈接所以可以點擊呢！

a span { 
 
    opacity: 0; 
 
} 
 
a:hover span { 
 
    opacity: 1; 
 
}

<a href="#" class="link">link <span class="someicon">i'm an icon</span></a>

來源

2016-08-13 13:41:32

使用本

.icon{ 
 
    visibility:hidden; 
 
} 
 
.link:hover+.icon{ 
 
    visibility:visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<a href="#" class="link">link</a> <span class="icon"><i class="icon-li icon-ok"></i></span>

來源

2016-08-13 13:42:33 Thinker

將鼠標懸停在另一個對象上的顯示圖標

回答

相關問題