当我将鼠标悬停时,我想在链接的右端显示一个引导glyphicon。

我试过使用CSS和JS,但都行不通。所以我需要索姆帮助:)

这就是我想要做的:When i hoover FooI 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/

10-12 12:34
查看更多