css给你灵感—一个鼠标经过文字的图片翻转效果

这是一个鼠标经过文字后，图片进行变换的一个案例，是纯css制作的。看看下面的效果，把鼠标放在“金、木、水、火、土”五个字上试试吧。希望这个效果能启发你一些灵感。

• 
• 金
• 木
• 水
• 火
• 土

Html

<ul id="navlist">
    <li class="active"><a href="#"><img src="1.jpg" width="250" height="156" alt="自由人" /></a></li>
    <li><a href="http://www.freeren.org">金<span><img src="2.jpg" width="250" height="156" alt="自由人" /></span></a></li>
    <li><a href="http://www.freeren.org">木<span><img src="3.jpg" width="250" height="156" alt="自由人" /></span></a></li>
    <li><a href="http://www.freeren.org">水<span><img src="4.jpg" width="250" height="156" alt="自由人;" /></span></a></li>
    <li><a href="http://www.freeren.org">火<span><img src="5.jpg" width="250" height="156" alt="自由人" /></span></a></li>
    <li><a href="http://www.freeren.org">土<span><img src="6.jpg" width="250" height="156" alt="自由人" /></span></a></li>
</ul>

Css

ul#navlist img {
    border:none;
    display:block;
    vertical-align:bottom;
}

ul#navlist {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    position:relative;
}

ul#navlist li {
    float:left;
    width:50px;
    background:#eee;
}
ul#navlist li.active {
    width:250px;
    clear:both;
}
ul#navlist a {
    display:block;
    width: 100%;
    text-align:center;
    background-color:#666;
    color: #fff;
    text-decoration: none;
    font-size:12px;
    line-height:20px;
}
ul#navlist a span {
    position:absolute;
    left:0px;
    top:0px;
    width:250px;
    height:156px;
    color:#EEE;
    visibility:hidden;
}
#page1 ul#navlist a span {
    top:0px;
}
#page2 ul#navlist a span {
    top:27px;
}
#page3 ul#navlist a span {
    top:54px;
}
#page4 ul#navlist a span {
    top:81px;
}
#page5 ul#navlist a span {
    top:108px;
}
#page6 ul#navlist a span {
    top:135px;
}
ul#navlist li.active a {
    width:250px;
    height:156px;
}
ul#navlist li a:hover {
    background:#eee;
    color:black;
    visibility:visible
}
ul#navlist li a:hover span {
    visibility:visible;
}