CSS + Hover + WP - Wie gleichzeitig Rahmen & Text hovern?

Hallo Community :)

Ich habe einen Rahmen mit Text (ein Link)

Wenn ich mit der Maus über den Rahmen gehe kommt ein Hover-Effekt (Rahmen-Farbe verändert sich).

Wenn ich dann weiter in die Mitte des Rahmens gehe bis zum Text (ein Titel mit Verlinkung), dann verändert er erst seine Text-Farbe

Ich möchte aber, dass sobald ich den Rahmen mit der Maus berühre, dass sowohl Rahmen UND Text den Howereffekt bekommen

Habt Ihr dafür eine Lösung?

.rahmen { border: 8px solid blau; }

.text a { color: blau; padding 40px 40px 40px 40px; }

.rahmen:HOVER { border: 8px solid rot; }

.text a:HOVER { color: rot; }

Answer 1

[regex9]

HTML:

<a class="button" href="#">Some link</a>

CSS:

.button {
  border: 8px solid blue;
  color: blue;
  padding: 40px;
}

.button:hover {
  border-color: red;
  color: red;
}

Demo

Die Klasse kannst du natürlich auch anders benennen. Ich fand button an der Stelle passend.

Comments

[Dustin777]

Danke, gute Idee beiden (Rahmen & Text) die gleiche Klasse zu geben.

Leider wird bei mir selbst da der Text erst rot wenn man den Text mit der Maus hovert (da ist schon vorher der Rahmen rot).

Gibt es andere Möglichkeiten? Z.B. mit einem anderen Wordpress Element.

[regex9]

@Dustin777

In der Demo siehst du, dass meine Lösung wie erwartet funktioniert. Wie deine Umsetzung aussieht, kann ich nicht erraten.

[Dustin777]

Ah ja, Ich sehe ein Problem "bei mir"... Ich habe einen längeren Text der zwei "Zeilenumbrüche" hat - daher konnte ich nicht den Text mit Rahmen machen, sondern für Text CSS/Klasse plus für Rahmen CSS/Klasse.

[regex9]

@Dustin777

Das heißt, du konntest das Problem bei dir nun lösen oder brauchst du noch weitere Hilfe? (Wenn ja, bitte einmal ein Fiddle anlegen und hier teilen oder die URL zur Seite geben und auf die Stelle in der Seite verweisen).