如何最好地用html制作笑脸框

我想在评论区域上方添加一个包含笑脸图标的框，该区域在单击时使用jQuery打开。我想到的是：

<div class="emo">
  <i href="#" id="showhide_emobox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
  <div id="emobox">
    <input class="emoticon" id="icon-smile" type="button" value=":)" />
    <input class="emoticon" id="icon-sad" type="button" value=":(" />
    <input class="emoticon"  id="icon-widesmile" type="button" value=":D" /> <br>

  </div>
</div>

jQuery：

 //  =======show hide emoticon div============
$('#showhide_emobox').click(function(){
    $('#emobox').toggle();
    $(this).toggleClass('active');

    });  


//  ============add emoticons============


 $('.emoticon').click(function() {
    var textarea_val = jQuery.trim($('.user-comment').val());
    var emotion_val = $(this).attr('value');

    if (textarea_val =='') {
    var sp = '';
    } else {
      var sp = ' ';  
    }
    $('.user-comment').focus().val(textarea_val + sp + emotion_val + sp);

    });   

但是，我很难将按钮放置在一个漂亮的数组中，并为它们制作背景图像（按钮值显示在图像之前，并且数组不是完全矩形的。所以我想这可能不是渲染此框的最佳方法

---

有什么好办法吗？

首先显示图像，悬停在“隐藏图像”和“显示文本”上。不需要输入元素来获取Dom节点的文本

大概是这样的：

$（文档）.ready（函数（）{
$（“.wrapper”）。单击（函数（）{
var值=$（this.find（“.smily text”）.text（）；
console.log（值）；
警报（“Smily文本为“'+value+””）；
});
})；

.smily{
背景：url(http://www.smiley-lol.com/smiley/manger/grignoter/vil-chewingum.gif)无重复中心；
宽度：45px；
高度：45px；
}
.smily文本{
显示：无；
字体大小：20px；
文本对齐：居中；
线高：45px；
高度：45px；
宽度：45px；
}
.包装纸{
边框：1px纯红；
浮动：左；
光标：指针；
}
.wrapper:悬停。微笑{
显示：无；
}
.wrapper:hover.smily文本{
显示：块；
}

:)
:(
:]
:[

你需要按钮的值吗？如果你要显示图像，那就太过分了。@daker，是的，因为这些值需要由jQuery获取（添加了代码）。所有的

s是怎么回事？@JamesDonnelly我知道这很笨重，但如果不添加，背景图像将不会显示（这里是noob前端开发者！）@hbsd给你的

i

元素一个

块的
显示
或
内联块
，然后给它一个
宽度
和
高度
。像这样使用
是不好的做法。
 //  =======show hide emoticon div============
$('#showhide_emobox').click(function(){
    $('#emobox').toggle();
    $(this).toggleClass('active');

    });  


//  ============add emoticons============


 $('.emoticon').click(function() {
    var textarea_val = jQuery.trim($('.user-comment').val());
    var emotion_val = $(this).attr('value');

    if (textarea_val =='') {
    var sp = '';
    } else {
      var sp = ' ';  
    }
    $('.user-comment').focus().val(textarea_val + sp + emotion_val + sp);

    });