CSS und Hover

[Stefan]

Liebes Forum,

ich bastel gerade an der Struktur einer Homepage und habe ein kniffliges Problem. Ich bin wzar kein Profi, verfüge aber dennoch über ein gutes Grundverständnis von html und css…

unter www.3dsg.de/test habe ich eine Seite angelegt, die mit mouseover effect verschiedene Boxen vergrößert. Unter der mittleren Box steht jetzt ein text "fff".

Wie schaffe ich es, dass dieser Text nicht sichtbar ist, sondern erst erscheint während ich mit dem Curosr über der grünen box bin? Ich schaffe es zwar, es zu zu programmieren, dass Box und Text einen eigenen mouseover haben, aber ich bekomme es nicht so hin, wie oben gewünscht.

vllt kann ir jmd einen strukturellen Vorschalg machen?

Für die Hilfe bin ich sehr dankbar..

Liebe Grüße

Stefan

[Matthias Scharwies]

Servus!

Liebes Forum,

Herzlich willkommen bei SELFHTML!

unter www.3dsg.de/test habe ich eine Seite angelegt, die mit mouseover effect verschiedene Boxen vergrößert. Unter der mittleren Box steht jetzt ein text "fff".

Wie schaffe ich es, dass dieser Text nicht sichtbar ist, sondern erst erscheint während ich mit dem Curosr über der grünen box bin?

Exkurs: Super, dass du mit grid und figure arbeitest. ich würde anstelle des span ein figcaption-Element verwenden.

Ich schaffe es zwar, es zu zu programmieren, dass Box und Text einen eigenen mouseover haben, aber ich bekomme es nicht so hin, wie oben gewünscht.

Im Titel hast Du schon von :hover`` gesprochen; mouseover verwendet man als Begriff eher, wenn man mittles JavaScript prüft, ob sich die Maus über dem Element befindet.

Im Tutorial CSS/Tutorials/Bilder_mit_Bildunterschriften wird so etwas gezeigt.

vllt kann ir jmd einen strukturellen Vorschalg machen?

Das figure-Element erhält eine bestimmte Größe und relative Positionierung; das figcaption-Element wird absolut im figure-Element positioniert.

Die figcaption ist durchsichtig und erhält erst, wenn die Maus über dem figure hovert eine volle Deckkraft (=nicht durchsichtig).

figcaption {
  opacity: 0;
  bottom: -3em;
  transition: all 1s ease;
}

figure:hover figcaption {
  opacity: 1;
  bottom: 0;
}

Herzliche Grüße

Matthias Scharwies

[Stefan]

Lieber Herr Scharwies,

vielen dank - genau das habe ich gesucht.

Jetzt ist es allerdings so, dass der Mouseover verschwindet, sobald man mit der Maus über den text fährt. Können Sie mir nochmal sagen, welches Einstellung ich hier anpassen kann?

Link ist gleich geblieben: www.3dsg.de/test

[Camping_RIDER]

Aloha ;)

Jetzt ist es allerdings so, dass der Mouseover verschwindet, sobald man mit der Maus über den text fährt.

Der hover-Effekt ist per CSS an das img mit class figure-img gebunden.

Die figcaption ist nicht Teil dieses img, sondern ein Geschwister-Element (auf derselben Ebene, nicht Teil davon).

Wenn man nun also über die figcaption fährt, wird das figure-img folglich nicht mehr gehovert, da die Maus nun über der figcaption, aber nicht über dem figure-img schwebt.

Können Sie mir nochmal sagen, welches Einstellung ich hier anpassen kann?

Die Lösung besteht darin, den hover-Effekt nicht am figure-img sondern am gemeinsamen parent-Element festzumachen.

Dein Selektor heißt im Moment

.figure-img:hover {
}

Wenn du das auf

figure.hover:hover figure-img {
}

umstellst, oder je nach benötigter Spezifizität auf eine Variante davon (z.B. figure.hover:hover + figure-img) sollte der von dir gewünschte Effekt erreicht werden.

Grüße,

RIDER

P.S.: Wir duzen uns untereinander im Allgemeinen. Du darfst das gerne auch so halten.

[Stefan]

Hallo Rider,

danke für den Hinweis, jetzt funktioniert es. Was mich allerdings wundert ist, dass der Effekt im neuen Firefox nciht korrekt dargestellt wird. Dazu muss ich vermutlich den einen oder anderen Befehlssatz anpassen.

Ich habe aber eine weitergehende Frage:

Ich hätte gerne oben einen Header, der nicht weggescrollt werden kann (Logo, Menü). Die eleganteste Variante wäre m.E. dies in dem Grid zu integrieren. Geht dies? oder muss ich dies mit einem Banner machen der als externes Element oben hängt...?

Liebe Grüße

Stefan

[Matthias Scharwies]

Servus!

Hallo Rider,

danke für den Hinweis, jetzt funktioniert es. Was mich allerdings wundert ist, dass der Effekt im neuen Firefox nciht korrekt dargestellt wird. Dazu muss ich vermutlich den einen oder anderen Befehlssatz anpassen.

Ich habe jetzt nicht viel Zeit nachzuschauen - mir ist nur folgendes aufgefallen:

IM HTML-Markup verwendest Du jetzt figure figcaption; im CSS-Regelsatz jedoch noch

.figure-img:hover .span {
    opacity: 0;
}

Ich teste so etwas immer erst mit einem Element (oder Block) bis es funktioniert und füge es dann in meine Testseite ein.

Ich hätte gerne oben einen Header, der nicht weggescrollt werden kann (Logo, Menü). Die eleganteste Variante wäre m.E. dies in dem Grid zu integrieren. Geht dies? oder muss ich dies mit einem Banner machen der als externes Element oben hängt...?

Wenn es immer oben sein soll, muss es ja gar nicht im Grid sein, sondern davor:

<header>
  <a class="backlink" href="/">zurück zur Startseite</a>
  <nav>
  …
  </nav>
</header>

<main>
  ...

Im CSS sähe das (verkürzt) dann so aus:

header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: white;
}

@media (min-width: 40em) {
  main {
    display: grid;
    grid-template-columns: repeat (6, 1fr);
  }

}

position:sticky geht bei vielen Browsern, aber nicht bei allen.

Ich habe gegenüber Deinem CSS die media-query auf relative Größen (die sich auf die Textgröße und nicht auf feste Pixel beziehen) angepasst und die vielen fr in eine repeat-Funktion gepackt. So sieht man gleich, dass es 6 Spalten sind.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Stefan,

der nicht weggescrollt werden kann

Das ist für kleine Bildschirme keine gute Idee.

Bis demnächst
Matthias