类似于好友印象标签式短评效果的CSS实现实例页面

代码:

CSS代码:
.impress,.impress_in{height:20px; margin:-1px 0 0 -1px; padding:2px 8px 0; border:1px solid #fff; color:#fff;}
.impress{font-size:12px; white-space:nowrap; float:left; position:relative;}
.impress .impress_in{display:none; cursor:pointer;}
.impress:hover{background-color:#1C8A1C; color:#fff; text-decoration:none; z-index:1;}
.impress:hover .impress_in{display:inline; background-color:#1C8A1C; position:absolute; left:0; top:0;}
.impress_c1,.impress_c1 .impress_in{background-color:#6FB32D;}
.impress_c2,.impress_c2 .impress_in{background-color:#86C547;}
.impress_c3,.impress_c3 .impress_in{background-color:#A5D37D;}
.impress_c4,.impress_c4 .impress_in{background-color:#B9D3A2;}
.impress_c5,.impress_c5 .impress_in{background-color:#C2D3B4;}
.impress_c6,.impress_c6 .impress_in{background-color:#C7CBC3;}
.impress_triangle{display:inline-block; width:5px; height:14px; line-height:14px; margin-bottom:-4px; font-family:'宋体'; text-indent:-7px; overflow:hidden;}
                
HTML代码:
<a href="javascript:" class="impress impress_c1">
    <span class="impress_in">暴力女,虐男癖</span>暴力女,虐&nbsp;<span class="impress_triangle">◆</span>
</a>
<a href="javascript:" class="impress impress_c2">成熟大气</a>
<a href="javascript:" class="impress impress_c3">
    <span class="impress_in">骨子里很好色</span>骨子里很好&nbsp;<span class="impress_triangle">◆</span>
</a>
<a href="javascript:" class="impress impress_c4">慷慨大方</a>
<a href="javascript:" class="impress impress_c5">直爽</a>
<a href="javascript:" class="impress impress_c6">不拘小节</a>
<a href="javascript:" class="impress impress_c6">随性</a>