将鼠标悬停在另一个对象上的显示图标

问题描述：

我希望我的链接在鼠标悬停时在旁边显示字体超赞的图标。整条生产线看起来是这样的：将鼠标悬停在另一个对象上的显示图标

<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; 
}

答

这是基本的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>

答

使用本

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

将鼠标悬停在另一个对象上的显示图标

相关推荐