html로 스마일 박스를 만드는 가장 좋은 방법

Question

클릭하면 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> 

CSS :

.emoticon-smile{ 
    background: url('../smileys/smile.png'); 
} 

#icon-smile { 
    border: none; 
    background: url('../images/smile.gif') no-repeat; 
} 

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); 

    }); 

나는 어려움 좋은 배열에 버튼을 배치 있고 (그들을 위해 배경 이미지를 만들 그러나 버튼 값이 이미지 앞에 나타나고 배열이 완벽하게 사각형이 아니므로이 상자를 렌더링하는 가장 좋은 방법이 아닌 것인지 궁금합니다.

제대로 할 수있는 아이디어가 있습니까?

Answer 1

첫 번째 이미지 표시, 마우스 오버시 이미지 숨기기 및 텍스트 표시.

$(document).ready(function() { 
 
    $(".wrapper").click(function() { 
 
    var value = $(this).find(".smily-text").text(); 
 
    console.log(value); 
 
    alert("Smily text is '" + value + "'"); 
 
    }); 
 
});

.smily { 
 
    background: url(http://www.smiley-lol.com/smiley/manger/grignoter/vil-chewingum.gif) no-repeat center center; 
 
    width: 45px; 
 
    height: 45px; 
 
} 
 
.smily-text { 
 
    display: none; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    line-height: 45px; 
 
    height: 45px; 
 
    width: 45px; 
 
} 
 
.wrapper { 
 
    border: 1px solid red; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
.wrapper:hover .smily { 
 
    display: none; 
 
} 
 
.wrapper:hover .smily-text { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="smily"></div> 
 
    <div class="smily-text">:)</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="smily"></div> 
 
    <div class="smily-text">:(</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="smily"></div> 
 
    <div class="smily-text">:]</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="smily"></div> 
 
    <div class="smily-text">:[</div> 
 
</div>