• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Button-Hover funktioniert nicht.

itsRufusSucka

Neues Mitglied
Ich grüße herzlichst.

Nun, im Rahmen eines Projekts muss ich eine Webseite schreiben und leider beherrsche ich in HTML und CSS nur die Grundlagen, was das ganze etwas schwierig macht.

Nun aber, diese Webseite soll Buttons haben, welche den Nutzer beim Draufklicken auf eine andere Webseite führen. Das Problem ist, dass diese Buttons zwar durchaus funktionieren, jedoch ändert sich der Cursor nicht, wenn man draufgeht und der button:hover in CSS funktioniert auch nicht.

In HTML sieht der Button so aus...

<form action="https://www.youtube.com/" target="_blank">
<button id="button1" type="submit">Stream on Youtube</button>
</form>


Die dazu passenden CSS-Eigenschaften so...

button:hover {
background-color: white;
color: #2323ff;
}

#button1 {
/* Eigenschaften des Kastens. */
background-color: #2323ff;
width: 294px;
height: 64px;
/* Abstand der Beschriftung von links. */
padding-left: 12px;
/* Texteigenschaften. */
text-align: left;
font-size: 18px;
font-family: 'futuramedium';
font-weight: normal;
font-style: normal;
color: white;
/* Eigenschaften für den Rand. */
border-color: white;
border-style: solid;
border-width: 3px;
/* Position, an sich selbst ausgerichtet. */
position: relative;
top: -8px;
}


Mir erklärt jedenfalls nicht, weshalb das nicht funktioniert. Hoffe, dass mir da irgendjemand weiterhelfen kann. Ich danke schon im Vorab für jede Hilfe und wünsche einen schönen Tag.
 
Werbung:
Ein Browser formatiert Elemente nach einer vorgegebenen Prioritätenliste! Ist ein Element durch mehrere Formatierungen im CSS angesprochen, wählt der Browser die höher priorisierte 'Ansprache' des Elementes.
In deine Fall hast du die Selektoren 'button' und '#button1' die miteinander konkurrieren. ... #button1 gewinnt!
Um den Hover-Effekt hier zu nutzen, musst du also statt..
CSS:
button:hover {
   background-color: white;
   color: #2323ff;
}
besser
CSS:
#button1:hover {
   background-color: white;
   color: #2323ff;
}
schreiben.

Und um den Cursor anders darzustellen schreibst du noch ein
CSS:
cursor: pointer;
in die Hover-Answeisung.

https://www.w3schools.com/cssref/pr_class_cursor.asp
 
Ein Browser formatiert Elemente nach einer vorgegebenen Prioritätenliste! Ist ein Element durch mehrere Formatierungen im CSS angesprochen, wählt der Browser die höher priorisierte 'Ansprache' des Elementes.
In deine Fall hast du die Selektoren 'button' und '#button1' die miteinander konkurrieren. ... #button1 gewinnt!
Um den Hover-Effekt hier zu nutzen, musst du also statt..
CSS:
button:hover {
   background-color: white;
   color: #2323ff;
}
besser
CSS:
#button1:hover {
   background-color: white;
   color: #2323ff;
}
schreiben.

Und um den Cursor anders darzustellen schreibst du noch ein
CSS:
cursor: pointer;
in die Hover-Answeisung.

https://www.w3schools.com/cssref/pr_class_cursor.asp

Sowas ähnliches hatte ich mir auch schon gedacht. Meinen allerbesten Dank!
 
Werbung:
Zurück
Oben