use-theme-editor

Version:
Zero configuration CSS variables based theme editor
63 lines (49 loc) • 1.72 kB
HTML
<!DOCTYPE html>
<!-- saved from url=(0094)https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/@media/hover/_sample_.examples.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <meta name="robots" content="noindex, nofollow">
        <style>
            body {
              padding: 0;
              margin: 0;
            }

            svg:not(:root) {
              display: block;
            }

            .playable-code {
              background-color: #f4f7f8;
              border: none;
              border-left: 6px solid #558abb;
              border-width: medium medium medium 6px;
              color: #4d4e53;
              height: 100px;
              width: 90%;
              padding: 10px 10px 0;
            }

            .playable-canvas {
              border: 1px solid #4d4e53;
              border-radius: 2px;
            }

            .playable-buttons {
              text-align: right;
              width: 90%;
              padding: 5px 10px 5px 26px;
            }
        </style>
        
        <style>
            a:hover { /* default hover effect */
  color: black;
  background: yellow;
}

@media (hover: hover) { /* when supported */
  a:hover {
    color: white;
    background: black;
  }
}

        </style>
        
        <title>hover - examples - code sample</title>
    <meta id="ConnectiveDocSignExtentionInstalled" name="ConnectiveDocSignExtentionInstalled" data-extension-version="1.0.6"></head>
    <body>
        
            <a href="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/@media/hover/_sample_.examples.html#">Try hovering over me!</a>

        
        
    
</body></html>