Frage CSS transition funktioniert nicht

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

Streethawk68

Neues Mitglied
12 September 2015
11
0
1
52
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
 

basti1012

Senior HTML'ler
26 November 2017
1.442
150
63
39
Minden
sebastian1012.bplaced.net
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
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 )
 

Streethawk68

Neues Mitglied
12 September 2015
11
0
1
52
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
 

basti1012

Senior HTML'ler
26 November 2017
1.442
150
63
39
Minden
sebastian1012.bplaced.net
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
 

Streethawk68

Neues Mitglied
12 September 2015
11
0
1
52
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:
Werbung:

Neueste Beiträge