Artikel mit Schlagwort

Wenn Sie die font-weight einer Schriftart ändern, verursacht der Text normalerweise eine leichte Layout-Verschiebung. Das liegt daran, dass fette Schrift oft größer ist und mehr Platz einnimmt. Manchmal spielt das keine Rolle, wie zum Beispiel bei einem vertikalen Stapel von ...

Lassen Sie uns einen reinen CSS-Effekt erstellen, der die Farbe eines Textlinks beim Überfahren mit der Maus ändert... aber lassen Sie diese neue Farbe hineingleiten, anstatt sie einfach auszutauschen....

Mezo Istvan deckt das Problem und eine Lösung dafür gut in einem Blogbeitrag auf Medium ab. Wenn Sie auf etwas tippen, das einen :hover-Zustand hat, aber die Seite nicht verlassen, besteht auf einem Mobilgerät die Chance, dass der :hover-Zustand "haften" bleibt. Dies sehen Sie bei Dingen wie Sprunglinks, die als Tabs oder Buttons verwendet werden, die Funktionalität auf der Seite auslösen.

Es würde mich überraschen, wenn Sie noch nie auf einen Ghost Button gestoßen wären 👻. Sie kennen diese: Sie haben einen transparenten Hintergrund, der sich beim Hovern mit einer Vollfarbe füllt. Smashing Magazine hat einen ganzen Artikel, der sich mit dieser Idee befasst. ...

Nehmen wir an, Sie möchten ein Element für einen lustigen visuellen Effekt bei :hover bewegen.

@media (hover: hover) {
  .list--item {
    transition: 0.1s;
    transform: translateY(10px);
  }
  .list--item:hover,
  .list--item:focus {
    transform: translateY(0);
  }
}

Cool, cool. Aber was, wenn Sie …

Eine Designerin, mit der ich zusammenarbeite, präsentierte kürzlich auf einem Team-Meeting Entwürfe. Sie hatte hervorragende Arbeit geleistet, indem sie das Konzept für ein Designsystem zusammenstellte, von Komponenten bis hin zu Mustern und allem dazwischen, was jedes Front-End …

Das ist ein besonderer Design-Trick, der die Leute immer wieder fesselt! Ich kenne nicht die genaue Geschichte, wer sich was zuerst ausgedacht hat und so weiter, aber ich weiß, dass ich im Laufe der Jahre eine Reihe von Implementierungen davon gesehen habe. …

Nehmen wir an, Sie haben eine Weltkarte und möchten das Land (oder den Bundesstaat, den Bezirk usw.) hervorheben können, wenn der Cursor darüber schwebt oder es angetippt wird.

Machbar!

Zuerst sollte die Karte wahrscheinlich ...

Die :hover Pseudo-Klasse in CSS wählt Elemente aus, wenn sich der Mauszeiger darüber befindet. Sie wird üblicherweise mit Link- (<a>) Elementen in Verbindung gebracht.

a:hover {
  color: green;
  text-decoration: underline overline;
}

Wenn also ein Link wie dieser ...