<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.