Mein CSS-Übergang funktioniert nicht, wenn ich die <html> Tags hinzufügen

Wenn ich am Anfang meines Dokuments <!DOCTYPE html> hinzufügen, funktioniert dieser Übergang nicht mehr. Warum?Mein CSS-Übergang funktioniert nicht, wenn ich die <html> Tags hinzufügen

Dies funktioniert (in Chrome und Microsoft Edge):

<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .container{ 
      width: 400px; 
      margin-left: auto; 
      margin-right: auto; 
      background-color: #9FC; 
     } 
     .gradBox { 
      width: 300px; 
      height: 100px; 
      margin-right: auto; 
      margin-left: auto; 
      margin-top: 20px; 
      margin-bottom: 20px; 
      border-top-left-radius: 15px; 
      border-top-right-radius: 15px; 
      -webkit-transition: width 1s; 
      transition: width 1s; 
     } 
     .gradBox:hover { 
      width: 400; 
     } 
     #grad1 { 
      background: linear-gradient(to right, #F00 1%, #FF0 25%, #0F0 50%, #0FF 75%, #00F 100%) 
     } 
    </style> 
</head> 
<body> 
<div class="container"> 
    <div class="gradBox" id="grad1">  
    </div> 
</div> 
</body> 
</html>

Dies funktioniert auch nicht:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    ... (the rest of the markup is identical)

Quelle

2016-05-24 Folo

Beide scheinen für mich gut zu funktionieren. – thepio

beide Codebeispiele sind gleich? – since095

@ since095: Das zweite Beispiel benutzt HTML5 – WorkWe

Sie haben das Gerät auf die Breite auf schweben zu erklären:

.gradBox:hover { 
    width: 400px; 
}

Sie verwendeten Pixel in der anfänglichen css-Deklaration, so dass es auch bei Hover verwendet wird. Ich weiß nicht, ob es ein Tippfehler in deiner Frage oder wo ist, aber es funktioniert nicht ohne die Einheit in beiden Fällen, also kann ich dir nicht wirklich sagen, warum das andere Beispiel funktionieren würde und das andere nicht.

Quelle

2016-05-24 11:05:28 thepio

Gut greif ... Wie habe ich das vermisst! Ich verbrachte den größten Teil einer Stunde damit, herauszufinden, was falsch war. – Folo

Heh, passiert das Beste von uns. Manchmal sind die kleinen Fehler gut Versteckspiel;) – thepio

Sie fehlen Pixel im Hover-Abschnitt

Quelle

2016-05-24 11:35:50 Susha

Mein CSS-Übergang funktioniert nicht, wenn ich die <html> Tags hinzufügen

Antwort

Verwandte Themen