CSS Zones mapping

<style> /* Demo style */ .demo-frame{ width: 300px; height: 300px; position: relative; /* Required */ border: 2px solid #fff; } .demo-frame div{ width: 100%; height: 100%; position: absolute; /* Required */ top: 0; z-index: 0; } .demo-frame span{ width: 100px; height: 100px; z-index: 1; display: block; background: transparent; float: left; position: relative; /* Required */ } .demo-frame span:nth-child(1):hover ~ div{ background: red; } .demo-frame span:nth-child(2):hover ~ div{ background: orange; } .demo-frame span:nth-child(3):hover ~ div{ background: blue; } .demo-frame span:nth-child(4):hover ~ div{ background: green; } .demo-frame span:nth-child(5):hover ~ div{ background: yellow; } .demo-frame span:nth-child(6):hover ~ div{ background: peru; } .demo-frame span:nth-child(7):hover ~ div{ background: gold; } .demo-frame span:nth-child(8):hover ~ div{ background: teal; } .demo-frame span:nth-child(9):hover ~ div{ background: tomato; } </style> <!-- The whole mapping zone --> <section class="frame"> <!-- Our mapping zones --> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <!-- The background --> <div></div> </section>

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.