Wie zeige ich eine <hr> beim Hover in HTML an?

...komplette Frage anzeigen

2 Antworten

Würde ich nicht mit einer Linie lösen, sondern einfach mit einem border im unteren Bereich.

.selector:hover {
   border-bottom: 1px solid #ccc;
}

Damit das Element nicht nach oben "springt", wenn der border verschwindet, würde ich standardmäßig auch einen border definieren, in der Farbe des Hintergrunds, so, dass er nicht auffällt.

.selector {
  border-bottom: 1px solid #fff;
}

Wie du schon gesagt hast, springt jetzt das darunter liegende Element nach unten, wenn sich der Border bzw. der 'Unterstrich' bildet. Da ich relativ neu in der HTML / CSS - Szene bin, würde ich mich freuen, wenn du mir noch erklärst, wie ich der h1 einen Border geben kann.

0
@baenii

Ups, das hast du mir ja schon gezeigt.^^ Sorry.

Danke für deine Hilfe!:)

1

Als „Farbe“ ohne hover würde ich transparent angeben, damit es unabhängig von der Hintergrundfarbe unsichtbar ist.

2
@Babelfish

Nice to know (für den HTML-Lehrling :P): man könnte auch so lange mit padding (Innenabstand) rumexperimentieren, bis der Abstand zwischen non-hover und hover mit border gleich ist.

Das ist aber mehr als umständlich, lieber border mit der Eigenschaft transparent vergeben.

hr ließe sich mit JS ausgeben, aber das wäre nun wirklich überflüssig.

1

Das waere ganz einfach:

HTML:

<div class="example">
Text
<hr />
</div>

CSS:

.example hr {display: none}
.example:hover hr {display: block}

Was möchtest Du wissen?