Mostra linkstrap glyphicon nel link quando si posiziona il mouse su

Sto provando a mostrare un glyphicon di bootstrap sul lato destro del mio collegamento quando lo stavo librando.Mostra linkstrap glyphicon nel link quando si posiziona il mouse su

Ho provato a utilizzare sia CSS che JS ma non funzionerà. Quindi ho bisogno di aiuto :)

Questo è quello che sto cercando di fare: When i hoover Foo, I want the pencil icon to show. E così via. Lo stesso accadrà quando avrò "Bar" e "Questo è un collegamento" anche

Voglio anche che sia un pulsante.

è così che l'html appare come:

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

Grazie per il vostro aiuto :)

fonte

2015-04-22 Andreas Glasø Skifjeld

È possibile utilizzare 'visualizzazione: none' /' proprietà inline-blocco-on ': hover'. –

Ci ho provato. Questo funziona solo se si desidera che l'icona venga visualizzata sotto il collegamento .bar { display: nessuno; } .foo: hover + .bar { display: blocco in linea; } –

Risposta aggiornamento:

controllo questo fiddle, spero che questo è esattamente quello che stai cercando,

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

fonte

2015-04-22 11:36:41 Robin

Grazie per l'esempio. Ma voglio che faccia lo stesso quando ho il resto dei link :) –

vedere il violino aggiornato, ho aggiornato la risposta, vedere se può essere di qualche aiuto – Robin

Grazie per l'aiuto: D Funziona perfettamente . –

aggiungere una classe "nascosto" e un id al div matita e un id per voi anchor "Foo":

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

Quindi aggiungi un listener di eventi hover all'ancora (ad es. utilizzando jQuery) che aggiunge/rimuove la classe nascosta (https://api.jquery.com/hover/):

fonte

2015-04-22 11:21:37 henkimon

Puoi usare il colore di sfondo del div come il colore del glyphicon e al passaggio del div/glyphicon puoi abilitare il 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; 
 
\t \t \t \t 
 
\t \t \t \t 
 
      } 
 
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; 
 
       
 
      } 
 
\t \t \t span{ 
 
\t \t \t 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> 
 
\t <button type="button"> 
 
     text2<span class="glyphicon glyphicon-ok" ></span> 
 
    </button> 
 
</div> 
 

 
</body> 
 
</html>

fonte

2017-05-18 10:51:56

Mostra linkstrap glyphicon nel link quando si posiziona il mouse su

risposta

Problemi correlati