在Hover的链接上显示可点击的图标
在Hover的链接上显示可点击的图标
提问于 2015-06-25 20:12:45
首先，我对CSS不是很坚定。我试图显示一个图标(右侧)在我的侧边栏链接(导航-一级)在鼠标上方。边栏链接目前使用100%的边栏.你有小费给我吗？
<ul>
<li class="nav-first-level">
<a class="facetGroup" href="#">Cardiology<span class="fa arrow"></span></a>
<span class="markGroup "><i class="fa fa-pencil fa-2" ></i></span>
<ul class="nav nav-second-level collapse">
<li ng-repeat="facet in cardiologyItems">
<a href="#" ng-attr-title="facet.group + ': ' + facet.name" ng-click="getTitle(facet.group, facet.name)"><span>{{ facet.name }}</span></a>
</li>
</ul>
</li>
</ul>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-25 20:28:21
这应该能带你去，拿个看(用CSS滚动显示图像图标)。
·将.image类与.facetGroup > remove <span>交换，使用<div>并与.markGroup交换演示.play类。基本上遵循下面的方法，用你的选择器进行定制！
<div class="itemsContainer">
<div class="image"> <a href="#"> <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg" /> </a></div>
<div class="play"><img src="http://cdn1.iconfinder.com/data/icons/flavour/button_play_blue.png" /> </div>
</div>CSS
.itemsContainer {
background:red;
float:left;
position:relative
}
.itemsContainer:hover .play{display:block}
.play{
position : absolute;
display:none;
top:20%;
width:40px;
margin:0 auto; left:0px;
right:0px;
z-index:100
} Stack Overflow用户
发布于 2015-06-25 20:51:00
使用li: property.Try这里：
<html>
<body>
<style>
ul li ul li:hover {
list-style-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png');
}
ul li ul li
{
list-style-type: none;
}
</style>
<ul>
<li>Cardiology
<ul>
<li>citem1</li>
<li>citem2</li>
<li>citem3</li>
</ul>
</li>
<li>Other
<ul>
<li>oitem1</li>
<li>oitem2</li>
<li>oitem3</li>
</ul>
</li>
</ul>
</body>
</html>工作JSFiddle示例：https://jsfiddle.net/t41w9u2w/2/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31059911
复制相关文章
相似问题
腾讯云开发者
