Hilfe bei JavaScript

[Gunnar Bittersmann]

@@Boris Bär

Reicht es, wenn ich in der CSS-Datei folgenden Code hinzufüge?

#next_page button:focus {
	background-image: url('images/library/next_page-hover.png');
}

#previous_page button:focus {
	background-image: url('images/library/previous_page-hover.png');
}

DRY! (Don’t repeat yourself!)

DU hast schon entsprechende Regeln für den :hover-Status. In diesen die Selektoren für :focus hinzufügen (wenn denn dasselbe passieren sool):

#next_page button:hover,
#next_page button:focus {
	background-image: url('images/library/next_page-hover.png');
}

#previous_page button:hover,
#previous_page button:focus {
	background-image: url('images/library/previous_page-hover.png');
}

Den Buttons habe ich Text beigefügt, soll ich den Text einfach durch span style=display:hidden oder so verstecken?

Nein. Damit würdest du den Text auch vor denen verstecken, die ihn nötig haben – Screenreader.

Gibt es eine elegantere Methode?

Die Beschriftung in ein <span class="visually-hidden"> packen und den gezeigten CSS-Code für die Klasse visually-hidden übernehmen. ☞ CodePen

LLAP 🖖