Question

我正在创建一个div内的项目列表。每个项目都有一个img和一些描述。

我有它，所以当你将鼠标悬停在图片上时，你可以放置一些你想要的数量。

但是，我的提交框出现在hoverbox区域之外。

以下是我希望看到的图片： enter image description here

以下是现在的样子： enter image description here

我一直在搞乱css，但我不能按照我想要的方式来设计它。

这是一个小的html片段和与悬停一起的css

HTML：

<div id="content_wrap">
    <ul>
        <li>
            <div class="item">
                <img src="images/menu/item1.png">
                <span class="hoverBox">
                   <p>QTY = </p>
                   <input type="text"/>
                </span>
            </div>
            <p class="sushi_info">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "</p>
        </li>
        <li>
            <div class="item">
                <img src="images/menu/item2.png">
                <span class="hoverBox">
                   <p>QTY = </p>
                   <input type="text"/>
                 </span>
            </div>
            <p class="sushi_info">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "</p>
        </li>
    </ul>
</div>

CSS：

.hoverBox{
    background: none repeat scroll 0 0 #F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    display:none;
    top:-130px;
    padding:20px;
    width:150px;
    height:20px;
}

.hoverBox:after{
    content:'';
    position:absolute;
    bottom:-10px;
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-5px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

div.item{
    float:left;
    position:relative;
    cursor:pointer;
}

div.item:hover span{
    display:block;
}

p{
width:30%;
height:100%;
}

关于我能做什么的任何想法？

Answer 1

您需要在悬停框上使用position:absolute并将其恰好放在底层元素上。 li必须有position:relative。然后，您可以应用各种样式效果，包括背景透明度，以实现您的结果。 input也应位于p内或使用label代替p。

查看此示例是否有帮助：http://jsfiddle.net/CQjzg/1/

注意：我用div替换img来模拟你的内容。

Answer 2

我相信它对

标签做了...它推出了我将它们包装在另一个DIV中或

悬停在区域上方未显示输入框。

2 个答案: