Question

我设置了<p>标记，其行为与购物车按钮相同。

现在我想制作一个弹出框，该框会显示在包含购物车详细信息的<p>标记的悬停中。

Answer 1

HTML

   <div id="product_list">
   <p class="poverlay" style="display:none;">Cart Details</p>      
    test elements test elements test elements test elements test elements
   </div>

CSS

    <style>
    #product_list{
     display:block;
     z-index:1;
     width:100px;
     height:100px;
     border:1px solid #ccc;
     padding:10px;
    }
    #product_list:hover > p.poverlay {
        display:block !important;
        top:0px;
        left:0px;
        position:absolute;
        padding:10px;
        color:#f00;
        font-weight:bold;
        z-index:2;
    }
    </style>

Answer 2

你可以在CSS中使用这样的东西：

你的弹出窗口开始隐藏：

#popupId{
    display: none;
}

当您将p元素悬停在

时，会显示该内容

p:hover #popupId{
    display: block;
}

然后用你想要展示的信息填写它。

Answer 3

是的，我做到了!!!!以我想要的方式。

感谢所有Josh，Ankit，thriqon，punitha

是否可以在<p>标签悬停时显示div </p>

3 个答案: