다른 개체 위로 마우스를 가져 가면 표시 아이콘

Question

내 링크에 마우스를 올려 놓으면 글꼴 옆에 멋진 아이콘이 표시됩니다. 전체 줄은 다음과 같습니다.

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

클래스 "링크"를 가리키면 어떻게 보이게 할 수 있습니까?

편집 :

감사합니다 모두, 내가 더 나은 솔루션을 함께했다. 추가 클래스 및 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; 
} 

Answer 1

기본 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>

Answer 2

사용이

.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>