悬停时在链接中显示bootstrap glyphicon

Question

当我在盘旋时,我正试图在我的链接的严谨侧显示一个bootstrap glyphicon.

我尝试过使用CSS和JS,但它不会工作.所以我需要帮助:)

这就是我想要做的事情:当我吸引Foo时,我想要铅笔图标显示.等等.当我胡说'Bar'和'这是一个链接'时也会发生同样的事情

我也希望它成为一个按钮.

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

答案更新：

检查这个小提琴，希望这正是您正在寻找的东西，

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