3
Ich habe einen Behälter mit kleinen goldenen Quadraten gefüllt. Auf :hover werden sie schwarz. Wenn sich die Maus über einem Quadrat befindet und zum nächsten auf der linken oder rechten Seite geht, funktioniert es gut.Unerwünschter Schwebeflug zwischen Linien
Das Problem ist: Wenn die Cursor über ein Quadrat ist und gehen zu einem anderen Platz auf einer anderen Zeile, gibt es eine Lücke auf dem :hover Effekt: ein Gebiet, wo keiner von ihnen bekommt die :hover Eigenschaften.
Wie vermeiden Sie dieses Blinken bei Hover, wenn die Maus vertikal über die Containerzeilen bewegt und warum passiert es?
#container {
width: 200px;
height: 90px;
line-height: 10px;
position: relative;
}
#container span {
display: inline-block;
width: 10px;
height: 10px;
background: gold;
vertical-align: top;
}
#container span:hover {
background: black;
}
#container span:hover ~ span {
background: tomato;
}<div id=container>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
** 1 ** - Danke für die Antwort. ** 2 ** - Ich habe ein Problem mit der vollständigen Version (nicht das minimale Beispiel). Wie Sie auf diesem [** codepen link **] (http://codepen.io/freestock/pen/jqmWoe?editors=1100) sehen, soll es ein Text in der Mitte dieses Buttons sein, aber es wird nicht angezeigt Ich nehme an, das ist wegen der 'font-size: 0' des Elternteils. Wie kann ich eine andere Schriftgröße für ein inneres Element festlegen? –
Sie können die Schriftgröße für dieses letzte div festlegen, es hat jedoch auch keine Höhe. – j08691
Ich öffnete [** eine Frage **] (http://stackoverflow.com/questions/36169765/strange-behavior-on-div-child-with-font-size-0) mit diesem Problem; –