CSS仅在带有图像的悬停框上

Question

有人可以解释如何创建like this：

更具体地说，当用户将鼠标悬停在按钮上时，我试图在按钮旁边显示一个带有图像的框。

只要用户将鼠标放在方框或按钮上，该框就会保留在那里。

我的代码，工作但没有图像：

http://jsfiddle.net/6LUnV/1/

CSS

.tooltip{
    position: relative;
}

.tooltip:hover:after{
    background: #000000;
    top: 30px;
    color: #FFFFFF;
    padding: 10px 10px;
    content: attr(id);
    left: -90px;
    position: absolute;
    z-index: 98;
    width: 200px;
}

HTML

<button class="tooltip" id="Pick an image<img src='a.png'/><img src='b.png'/><img src='c.png'/><img src='d.png'/>" style="margin-left:160px;">Select</button>

编辑：问题已更新

Answer 1

什么是圣那样的？

<style>

#select {position: relative; width: 80px; margin: 0 auto;}
button {width: 80px;}

#images {overflow: hidden; position: absolute; bottom: -50px; left: 50%; margin-left: -100px; width: 200px; display: none;}
img {float: left; width: 50px; height: 50px;}
img {background: red;}
img:nth-child(2) {background: green;}
img:nth-child(3) {background: blue;}
img:nth-child(4) {background: yellow;}

#select:hover #images {display: block;}

</style>

<div id="select">
    <button>select</button>

    <div id="images">
        <img>
        <img>
        <img>
        <img>
    </div>
</div>

http://jsfiddle.net/6LUnV/2/