I'm trying to show a bootstrap glyphicon on the rigth side on my link when I am hovering it.

I've tried using both CSS an JS but it just wont work. So i need som help :)

This is what I am trying to do: When i hoover Foo, I want the pencil icon to show. And so on. The same is going to happen when i hoover 'Bar' and 'This is a link' also

I also want it to be a button.

This is how the html looks like:

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

Thank you for your help :)

I'm trying to show a bootstrap glyphicon on the rigth side on my link when I am hovering it.

I've tried using both CSS an JS but it just wont work. So i need som help :)

This is what I am trying to do: When i hoover Foo, I want the pencil icon to show. And so on. The same is going to happen when i hoover 'Bar' and 'This is a link' also

I also want it to be a button.

This is how the html looks like:

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

Thank you for your help :)

• javascript
• jquery
• html
• css

• You can use display:none / inline-block property on :hover. – Ofir Baruch Commented Apr 22, 2015 at 11:09
• I've tryed that. This only works if I want the icon to apear under the link .bar { display: none; } .foo:hover + .bar { display: inline-block; } – Andreas Glasø Skifjeld Commented Apr 22, 2015 at 11:15

3 Answers 3

Answer updated:

check this fiddle, hope this is exactly what you are looking for,

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

Add a "hidden" class and an id to your pencil div and an id to you "Foo" anchor:

<a href="#" class="nesting-item" id="foo">
    <span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo 
    <div id="pencil-glyph" class="pull-right hidden">
        <span class="glyphicon glyphicon-pencil" area-hidden="true"></span>
    </div>
</a>

CSS:

.hidden { display: none; }

Then add an hover event listener to your anchor (e.g. using jQuery) which adds/removes the hidden class (https://api.jquery./hover/):

$('#foo').hover(function () {
    $('#pencil-glyph').removeClass('hidden'); 
}, function () {
    $('#pencil-glyph').addClass('hidden');
});

You can use the background-color of the div as glyphicon's color and on hovering the div/glyphicon you can enable the glyphicon.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
button{
 font-size: 30px;
                background: white;
                border: 2px solid blue;
                margin-top: 10px;
                border-radius: 2px;
                box-sizing: border-box;
                color: blue;
                cursor: pointer;
                padding: 10px 24px;
                transition: box-shadow 200ms;
				
				
            } 
button:hover{
                font-size: 30px;
                background:blue;
                border: 0;                
                border-radius: 2px;
                box-sizing: border-box;
                color: #fff;
                cursor: pointer;
                padding: 10px 24px;
                transition: box-shadow 200ms;
                
            }  
			span{
			color:white;
}
span:hover {    
}
</style>
<body>

<div class="container">
     <button type="button">
        text<span class="glyphicon glyphicon-ok" ></span>
    </button>
  <button type="button">
        text1<span class="glyphicon glyphicon-ok" ></span>
    </button>
	<button type="button">
        text2<span class="glyphicon glyphicon-ok" ></span>
    </button>
</div>

</body>
</html>