CSS-图像映射

图像映射是将一些区域变成热点，我们在网上获取搜索图片，图片上会有关于任务的简短信息介绍，还有一个接触更多的就是QQ空间的相册，浏览QQ空间照片鼠标滑动到人物头像的时候让你选择标记人物，都是将图片和内容混合在一起进行表现。用户在看图片的时候不在是冰冷冷的图片，其实就是实现起来这种内容和图片的映射很简单，简单的看下效果:

Html代码:

<!-- 博客园-FlyElephant http://www.cnblogs.com/xiaofeixiang/ -->
<div class="group-img">
    <img src="../../public/images/group.jpg" alt="合影">
    <ul>
        <li class="li">
            <a href="http://www.cnblogs.com/xiaofeixiang/">
                <span class="outer">
        <span class="inner">
        <span class="note">李连杰</span>
                </span>
                </span>
            </a>
        </li>
        <li class="yao">
            <a href="http://www.cnblogs.com/xiaofeixiang/"> <span class="outer">
        <span class="inner">
        <span class="note">姚明</span>
                </span>
                </span>
            </a>
        </li>
    </ul>
</div>

　CSS代码：

.group-img {
    width: 423px;
    height: 480px;
    position: relative;
}
 
.group-img a {
    position: absolute;
    display: block;
    text-decoration: none;
    color: #000;
    border: 1px solid transparent;
}
 
.group-img a .outer {
    display: block;
    border: 1px solid transparent;
}
 
.group-img a .inner {
    display: block;
    width: 100px;
    height: 80px;
    border: 1px solid transparent;
    margin: 3px;
}
 
.group-img a .note {
    position: absolute;
    top: 100px;
    left: -9999px;
    background: #BDBDBD;
    width: 106px;
    padding: 5px;
    text-align: center;
    color: #fff;
}
 
.group-img .li a {
    top: 100px;
    left: 120px;
}
 
.group-img .yao a {
    top: 8px;
    left: 260px;
}
 
.group-img a:hover,
.group-img a:focus {
    border: 1px solid #d4d82d;
}
 
.group-img a:hover .outer,
.group-img a:focus .outer {
    border: 1px solid #00FF7F;
}
 
.group-img a:hover .inner,
.group-img a:focus .inner {
    border: 1px solid #00CED1;
}
 
.group-img a:hover .note,
.group-img a:focus .note {
    left: 0px;
}