当我将鼠标悬停时,我想在链接的右端显示一个引导glyphicon。
我试过使用CSS和JS,但都行不通。所以我需要索姆帮助:)
这就是我想要做的:When i hoover Foo,I want the pencil icon to show。等等。当我悬停“Bar”和“This is a link”时,也会发生同样的情况
我也希望它是一个按钮。
这是html的样子:
<div class="nesting">
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <div class="pull-right"><span class="glyphicon glyphicon-pencil" area-hidden="true"></div></a>
<div class="nesting_child">
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar</a>
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link</a>
感谢您的帮助 :)
最佳答案
答案已更新:
检查这个fiddle,希望这正是您想要的,
//html
<div class="nesting">
<a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
<div class="nestchild">
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span></a>
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span></a>
</div>
</div>
//javascript
$(document).ready(function(){
$('.nesting a').hover(function(){
$(this).children('span.pencil').css({'display' : 'inline-block'});
},function(){
$(this).children('span.pencil').css({'display' : 'none'});
});
});
//css
.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nesting a .pencil {display : none; }
.nestchild { margin-left : 15px; }
关于javascript - 悬停时在链接中显示bootstrap glyphicon,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29795566/