发布表情的预览显示效果

 css :

.codeBox .codeBody {
 width:486px;
 height:175px;
 border-width:0 1px 1px 1px;
 border-style:solid;
 border-color:#dfe6f6;
 clear:both;
 padding-top:3px;
 background:#ffffff;
 position:relative;
}
.codeBox .codeBody .leftBody {
 width:243px;
 height:100%;
 float:left;
}
.codeBox .codeBody .rightBody {
 width:243px;
 height:100%;
 float:left;
}
.codeShape {
 display:block;
 width:80px;
 height:20px;
 line-height:20px;
 float:left;
 border:1px solid #dfe6f6;
 margin:-1px 0 0 -1px;
 text-align:center;
 color:#333333;
}
.codeShape:hover {
 background:#f6f6f6;
}
.codeShape span {
 display:none;
}
.codeShape span cite {
 font-style:normal;
 font-size:18px;
}
.leftBody .codeShape:hover span {
 display:block;
 position:absolute;
 top:0;
 right:0;
 width:160px;
 height:45px;
 border:1px solid #316ac4;
 background:white;
 padding-top:20px;
}
.rightBody .codeShape:hover span {
 display:block;
 position:absolute;
 left:0;
 top:0;
 width:160px;
 height:45px;
 border:1px solid #316ac4;
 background:white;
 padding-top:20px;
}
.iebug_kill {
 height:1px;
 overflow:hidden;
 clear:both;
}
</style>

 

 

 

 

 

html:

 

 <div class="codeBody" id="mood_con">
      <div class="leftBody"> <a href="#" class="codeShape" οnclick="addCode(this);"><font>*^ο^*</font><span><cite>*^ο^*</cite><br />
        哦~呵呵傻笑</span> </a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>(+_+)?</font><span><cite>(+_+)?</cite><br />
        不知道你在说什么</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>﹌○﹋</font><span><cite>﹌○﹋</cite><br />
        喔嗨呦</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>///^_^....</font><span><cite>///^_^....</cite><br />
        造成“冷”...干笑</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>（ˇ︿ˇ﹀</font><span><cite>（ˇ︿ˇ﹀</cite><br />
        不以为然</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>~@^_^@~</font><span><cite>~@^_^@~</cite><br />
        可爱呦！</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>?o?|||</font><span><cite>?o?|||</cite><br />
        无听（就是听不懂的意思）</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>( ^_^ )?</font><span><cite>( ^_^ )?</cite><br />
        什么意思？</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>^_^"</font><span><cite>^_^"</cite><br />
        尴尬的笑</span></a>
        <div class="iebug_kill"></div>
      </div>
      <div class="rightBody"> <a href="#" class="codeShape" οnclick="addCode(this);"><font>..@_@|||||..</font><span><cite>..@_@|||||..</cite><br />
        头昏眼花</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>(⊙o⊙)</font><span><cite>(⊙o⊙)</cite><br />
        目瞪口呆</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>x__x,</font><span><cite>x__x,</cite><br />
        唉...别哭了</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>ˋ_ˊ*</font><span><cite>ˋ_ˊ*</cite><br />
        你不要命啦</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>⊙﹏⊙∥∣°</font><span><cite>⊙﹏⊙∥∣°</cite><br />
        真尴尬</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>~~&gt;_&lt;~~</font><span><cite>~~&gt;_&lt;~~</cite><br />
        痛哭，十分伤心</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>(﹁ ﹁)</font><span><cite>(﹁ ﹁)</cite><br />
        值得怀疑哦~~</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>╮(╯3╰)╭</font><span><cite>╮(╯3╰)╭</cite><br />
        无奈</span></a> <a href="#" class="codeShape" οnclick="addCode(this);"><font>T_T</font><span><cite>T_T</cite><br />
        流泪的样子</span></a>
        <div class="iebug_kill"></div>
      </div>
    </div>