Farbe Kind Elemente mit Randhöhe auf Hover

Ich habe ein Elternteil Div mit 2 Anker Kind Elemente. Das Eltern-div hat einen Rahmen und beim Hover möchte ich die Kind-Anker-Tags hervorheben. Jetzt kann ich das tun, aber der Hover füllt nicht die gesamte Breite und Höhe des Rahmens, der das Eltern-Div umgibt.Farbe Kind Elemente mit Randhöhe auf Hover

.header-info { 
 
    max-width: 250px; 
 
    padding: 10px; 
 
    text-align: center; 
 
    font-size: 0px; 
 
    margin-top: 10px; 
 
    font-size: 15px; 
 
    border-radius: 5px; 
 
} 
 
.about-header-container { 
 
    width: 240px; 
 
    border: 10px solid #027878; 
 
} 
 
.about-header-container>a:hover { 
 
    background-color: #027878; 
 
    color: white; 
 
    opacity: 0.7; 
 
}

<div class='about-header-container header-info' id='about-header'> 
 
    <a class='bio-header tablink' href='#bio-dashfolio'>Bio</a> 
 
    <a class='timeline-header tablink' href='#timeline-dashfolio'> Timeline</a> 
 
</div>

Hier ist die Geige: https://jsfiddle.net/kesh92/3cnxef4h/

Auf über schwebt Bio und Timeline, ich will es auf die Farbe #027878 markieren, während Sie den entsprechenden Abschnitt im Inneren der Auffüllen Grenze, ohne irgendwelche weißen Räume zwischen der Grenze und den Ankerelementen zu lassen. Danke im Voraus!

aktualisieren Dies wird die gewünschte Hover-Effekt -

Vor Hover

Wenn über Bio schwebt

Quelle

2016-09-17 Keshav Vasudevan

Edit: Haben Sie nicht realisiert werden Sie sowohl die Höhe füllen wollte und Breite. Dieser wird den Trick machen:

Auf Ihrer .header-info ändern Polsterung: 5px; zum Auffüllen: 0 5px;

Arbeits Geige hier: https://jsfiddle.net/cba0cn7n/1/

Und verwenden Sie den Code unterhalb der Höhe nur

display: inline-block; 
padding: 5px 0;

zu Ihrem .tablink

zu füllen, was hier getan wird, wird die padding-top zu entfernen und unten von .header-info und fügt es dem .tablink hinzu.

Quelle

2016-09-17 21:04:43

Danke, dass Sie sich die Zeit genommen haben, zu antworten! Was Sie vorschlagen, und bitte korrigieren Sie mich, wenn ich falsch liege, ist das Padding der Ankerelemente zu ändern, damit sie besser an den übergeordneten Rahmen passen. Ich habe bereits die Stile an Ort und Stelle. Was ich tun möchte, ist, die Ankerelemente bei Hover zu markieren, um den rechten bzw. linken Randbereich zu füllen. Bitte lesen Sie die aktualisierte Frage, da ich das gewünschte Ergebnis hinzugefügt habe. Thnks! –

Hallo Keshav, ich habe die Fiddle-Verbindung vermasselt, aber jetzt habe ich es richtig gemacht. Überprüfen Sie es hier: https://jsfiddle.net/cba0cn7n/1/ überprüfen Sie, ob es das ist, was Sie suchen. Ich bin froh zu helfen –

Das ist perfekt! Danke vielmals! –

Farbe Kind Elemente mit Randhöhe auf Hover

Antwort

Verwandte Themen