Button-Hover funktioniert nicht.

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

itsRufusSucka

Neues Mitglied
5 März 2019
3
0
1
17
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.
 

Sailor

Aktives Mitglied
14 Juli 2017
331
35
28
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
 

itsRufusSucka

Neues Mitglied
5 März 2019
3
0
1
17
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:

Latest posts