Bootstrap glyphicon in Verbindung anzeigen, wenn der Mauszeiger schwebt

Ich versuche ein Bootstrap-Glyphon auf der rechten Seite meines Links zu zeigen, wenn ich es schwebe.Bootstrap glyphicon in Verbindung anzeigen, wenn der Mauszeiger schwebt

Ich habe versucht mit CSS ein JS aber es wird einfach nicht funktionieren. Also ich brauche etwas Hilfe :)

Das ist, was ich versuche zu tun: When i hoover Foo, I want the pencil icon to show. Und so weiter. Das gleiche wird passieren, wenn ich Staubsauger "Bar" und "Dies ist ein Link" auch

Ich möchte auch, dass es eine Schaltfläche sein.

Dies ist, wie die html wie folgt aussieht:

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

Danke für Ihre Hilfe :)

Quelle

2015-04-22 Andreas Glasø Skifjeld

Sie können 'Anzeige: none' /' Inline-block' Eigenschaft auf ': hover'. –

Ich habe das versucht. Dies funktioniert nur, wenn ich möchte, dass das Symbol unter dem Link .bar { Anzeige: keine; } .foo: Hover + .bar { Anzeige: Inline-Block; } –

Antwort aktualisiert:

Überprüfung dieses fiddle, hoffen, dass dies genau das ist, was Sie suchen,

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

Quelle

2015-04-22 11:36:41 Robin

Vielen Dank für das Beispiel. Aber ich will es genauso machen, wenn ich den Rest der Links auch hoover :) –

sehe die aktualisierte Geige, ich habe die Antwort aktualisiert, sehen, ob das von irgendeiner Hilfe sein kann – Robin

Danke für die Hilfe: D Es funktioniert perfekt . –

hinzufügen „versteckt“ Klasse und eine id Bleistift div und eine id Sie "Foo" Anker:

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

Fügen Sie Ihrem Anker dann einen Hover-Ereignis-Listener hinzu (z. mit jQuery), die hinzufügt/entfernt die versteckten Klasse (https://api.jquery.com/hover/):

Quelle

2015-04-22 11:21:37 henkimon

Sie können die Hintergrundfarbe des Divs als Glyphiconsfarbe verwenden und wenn Sie das Div/Glyphicon bewegen, können Sie das Glyphicon aktivieren.

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

Quelle

2017-05-18 10:51:56

Bootstrap glyphicon in Verbindung anzeigen, wenn der Mauszeiger schwebt

Antwort

Verwandte Themen