important-transition-manual.html (1369B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Cascade: Author !important vs. Transitions</title> 6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 7 <link rel="help" href="https://www.w3.org/TR/css-cascade-3/#cascade-sort"> 8 <style> 9 .container { padding: 1em 0; border-style: dotted none; border-width: 1px; } 10 .container > div { width: 5em; text-align: center; border: solid; transition: all 3s; } 11 12 .container > .ref { border-color: blue ; color: navy ; background: aqua ; margin: 0.25em ; } 13 :hover > .ref { border-color: aqua ; color: orange ; background: teal ; margin-left: 40% ; } 14 15 :not(:hover) > .test { border-color: blue !important; color: navy !important; background: aqua ; } 16 div > .test { margin: 0.25em !important; } 17 :hover > .test { border-color: aqua !important; color: orange ; background: teal !important; margin-left: 40% !important; } 18 </style> 19 20 <p>Test passes if the two boxes transition identically when hovering with a mouse below. 21 22 <div class=container> 23 <div class=test>Box 1</div> 24 <div class=ref>Box 2</div> 25 </div>