Menu
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 :)
517
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.com/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.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
