javascript - 悬停时在链接中显示 Bootstrap 字形

Question

当我将鼠标悬停在链接上时，我试图在链接的右侧显示 Bootstrap 字形图标。

我试过同时使用 CSS 和 JS，但它就是行不通。所以我需要一些帮助:)

这就是我想要做的:When i hoover Foo , I want the pencil icon to show .等等。当我也将“栏”和“这是一个链接”放在一起时，也会发生同样的情况

我也希望它是一个按钮。

这是 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>

谢谢你的帮助:)

Answer 1

答案已更新:

检查这个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; }