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

Frage CSS transition funktioniert nicht

Streethawk68

Neues Mitglied
Hallo Profis, Fans und Bastler!
Ich möchte den CSS-Transition-Effekt bei hover nutzen; das klappt aber nicht. Hier der Code:
HTML:
<head>
    <link href="css/hyperlinks_als_button.css" rel="stylesheet">
</head>
<body>
    
    <!-- <h1>Links als Buttons</h1> -->
    
    <section class="angebot">

      <h2>Ab auf die Insel</h2>

      <figure>
        <img src="bilder/schiermonnikoog-strand.jpg" width="512" height="384" alt="Strand auf Schiermonnikoog">

        <figcaption>

          <a href="#" class="button-primary">Jetzt buchen</a>

          <a href="#" class="button-secondary">Mehr Infos</a>

        </figcaption>
      </figure>

    </section>     
  </body>
Und hier der CSS-Code:
CSS:
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,   
        "Helvetica Neue", Helvetica, Arial, sans-serif;       
    line-height: 1.5;
    text-align: center;
    background: #fbf9f3;
    max-width: 600px;
    padding: 1rem;
    margin: 1rem auto;
}
        
.button-primary, .button-secondary {
    display: inline-block; /* nebeneinander, aber wie Blockbox */
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem;
    margin-top: 1rem;
}
        
.button-primary {
    background: steelblue;
    color: white;
    margin-right: 2rem;
}
        
.button-secondary {
    background: transparent;
    color: steelblue;
    border: 2px solid steelblue;
}
        
.button-primary:hover, .button-primary:focus {
    background-color: #b4464b;
    color: white;
    transition: all 0.2s ease;
}
        
.button-secondary:hover, .button-secondary:focus {
    background-color: steelblue;
    transition: all 0.2s ease;
}

Wer hätte eine Idee?
Euer Streethawk68
 
Werbung:
Ich habe dein Code mal bei Codepen reinkopiert und die transition Zeit auf 2 Sekunden gestellt ( dann sieht man es besser ).
Ich weiß nicht was du erwartest aber es geht doch , zumindest die Farbe wechselt

Zur Lösung

Hier
Code:
.button-secondary:hover, .button-secondary:focus {
    background-color: steelblue;
    transition: all 2.2s ease;
}
solltest du vieleicht noch color:white; eintragen ( für die Optik )
 
Zuletzt bearbeitet:
In meinen Browsern Firefox und Edge funktioniert es nicht. Kann es sein, dass es daran liegt, dass die Dateien lokal sind und auf keinem Webspace liegen?
LG Streethawk68
 
Werbung:
Html und Css kann man auch lokal testen, das sollte kein problem sein.
Wenn du mit den Firefox und Edge auf meinen Link gehst , geht es den dann ?
Mein Firefox macht keine probleme.
Kann das sein das du Local probleme mit den verlinkungen hast und deine Css gar nicht geladen wird ?
Schreib doch mal alles in einer Datei
HTML:
<!doctype html>
<html lang="de">
  <head>
    <style>
      body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,  
        "Helvetica Neue", Helvetica, Arial, sans-serif;      
    line-height: 1.5;
    text-align: center;
    background: #fbf9f3;
    max-width: 600px;
    padding: 1rem;
    margin: 1rem auto;
}
       
.button-primary, .button-secondary {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem;
    margin-top: 1rem;
}
       
.button-primary {
    background: steelblue;
    color: white;
    margin-right: 2rem;
}
       
.button-secondary {
    background: transparent;
    color: steelblue;
    border: 2px solid steelblue;
}
       
.button-primary:hover, .button-primary:focus {
    background-color: #b4464b;
    color: white;
    transition: all 2.2s ease;
}
       
.button-secondary:hover, .button-secondary:focus {
    background-color: steelblue;
    color:white;
    transition: all 2.2s ease;
}
    </style>
  </head>
<body>
    <section class="angebot">
      <h2>Ab auf die Insel</h2>
      <figure>
        <img src="bilder/schiermonnikoog-strand.jpg" width="512" height="384" alt="Strand auf Schiermonnikoog">
        <figcaption>
          <a href="#" class="button-primary">Jetzt buchen</a>
          <a href="#" class="button-secondary">Mehr Infos</a>
        </figcaption>
      </figure>
    </section>    
  </body>
  </html>
Den Code als html Datei auf den Deskop speichern, rechts klick und dann öffnen mit ( Firefox , Opera oder sonst was ).
Bei mir funktioniert das in FF OPERA und CHROM.
Am Code wird es wohl nicht liegen
 
Hallo!

Erstmal danke für dein Engagement in dieser Sache. Dein Link aus deiner ersten Antwort funktioniert. Ebenso dein Code. Dennoch besteht das Problem weiter. Das CSS wird geladen; sonst würde ja nur der Rohtext ohne Formatierungen angezeigt.

Grüße, Streethawk68

P.S.: (17.10.2020, 6.40 Uhr) Es funktioniert jetzt. Keine Ahnung, ob man die Browser-Chronik löschen musste, oder woran es sonst lag... LG Streethawk68
 
Zuletzt bearbeitet:
Zurück
Oben