All geek questions in one place

Show bootstrap glyphicon in link when freezing

I'm trying to show a bootstrap glyphicon on the side of the side on my link when I hang it.

I tried using CSS as JS, but it just doesn't work. So I need help som :)

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

I also want this to be a button.

Here's what 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>

Thanks for the help :)

+6
source share
3 answers

Answer updated:

check the 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; }
+3
source

Add the “hidden” class and identifier to your pencil div and 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 a hover event listener to your anchor (e.g. using jQuery) that adds / removes a hidden class ( https://api.jquery.com/hover/ ):

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

You can use the background color of the div as the color of the glyphicon and when you hover div / glyphicon you can turn on 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>
0
source

Source: https://habr.com/ru/post/985671/

More articles:


All Articles