Icons mit Rand, nebeneinander mit Rand Hover-Effekt

Ich habe kleine Hindernisse. Ich hätte gerne Icons mit Rahmen nebeneinander in einer Zeile, aber mit Hover-Effekt, der die Farbe der Icons ändert.Icons mit Rand, nebeneinander mit Rand Hover-Effekt

Wenn ich den Hover-Effekt mit der Grenze 2px fest grün mache, bewegen sich die ersten zwei Symbole um 2 px nach links. Wie wird die Hover-Effekt-Rahmenfarbe um das eine Symbol herum verändert?

Icons sind von der Schriftart fantastisch, hier sind nicht sichtbar.

span{ 
 
    border: 2px solid red; 
 
    &:nth-child(1), 
 
    &:nth-child(2) { 
 
     border-right: none; 
 
    } 
 
}

<a href="#"> 
 
    <span> 
 
    <i class="fa fa-bars" aria-hidden="true"></i> 
 
    </span> 
 
    <span>PL</span> 
 
    <span id="over-menu-open"> 
 
    <i class="fa fa-long-arrow-up " aria-hidden="true"></i> 
 
    </span> 
 
</a>

Quelle

2017-04-20 Blosom

keine unterschiedlichen Rahmenbreiten, sondern eine transparente Grenzfarbe anwenden. Oder verwenden Sie "Umriss" anstelle von Rahmen, was sich nicht auf Elementabmessungen und -positionen auswirkt. – CBroe

Hier ist ein [Stift mit Font Awesome geladen von einem CDN] (https://codepen.io/PhilippeVay/pen/xdVxEL). Und Scss + normalisieren + Autoprefixer. Sie können Ihren Hover-Effekt und relevante Stile von dort hinzufügen und auslagern. – FelipeAls

Ich bin mir nicht sicher, ob ich Sie richtig verstanden habe, aber man kann dies versuchen:

span { 
    border: 2px solid red; 

    & + & { 
    border-left-color: transparent; 
    } 
}

Die oben setzt die Grenze Farbe transparent, anstatt es zu entfernen, somit werden die Elemente nicht springen.

Quelle

2017-04-20 09:50:15

Die Lösung ist span:hover + span Selektor zu verwenden, um den linken Rand des nächsten span zu entfernen.

span { 
 
    border-top: 2px solid red; 
 
    border-left: 2px solid red; 
 
    border-bottom: 2px solid red; 
 
    padding: 1px; 
 
} 
 

 
span:last-child { 
 
    border-right: 2px solid red; 
 
} 
 

 
span:hover { 
 
    border: 2px solid green; 
 
} 
 

 
span:hover + span { 
 
    border-left: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<a href="#"><span><i class="fa fa-bars" aria-hidden="true"></i></span><span>PL</span><span id="over-menu-open"><i class="fa fa-long-arrow-up " aria-hidden="true"></i></span></a>

Quelle

2017-04-20 09:55:45 Shiva127

Danke Shiva! Es funktioniert. Ich weiß es nicht, aber es funktionierte nicht, während ich Saas Styles benutzte, aber mit normalem CSS funktioniert es. Auch der Übergang langsamer Effekt in diesem unterbrochen. Aber wenn ich den Übergangseffekt annulliere, ist der Effekt schön und sichtbar :) – Blosom

So validierst du die andere Antwort. Ich verstehe nicht. ;) – Shiva127

Icons mit Rand, nebeneinander mit Rand Hover-Effekt

Antwort

Verwandte Themen