CSS实现鼠标移动到购物车显示详情

AsiaFT.

已于 2022-08-14 09:53:01 修改

阅读量740

点赞数

文章标签： css css3 html

于 2022-08-01 16:29:41 首次发布

本文链接：https://blog.csdn.net/m0_46181452/article/details/126088467

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息
解析：

清除所有默认样式：

{
margin: 0;
padding: 0;
}
2. CSS3 新增属性： box-sizing: border-box; 这个属性基本盒子都增加该属性；

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标划过显示购物车详情</title>
    <style>
        /* 清除所有默认样式 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .shoppingcart {
            /* css3 新增属性，控制WIDTH和HEIGHT属性是盒子的最终宽高 */
            box-sizing: border-box;
            border: 1px solid lightcoral;
            height: 30px;
            line-height: 30px;
            text-align: center;
            width: 100px;
            /* 居中展示 */
            margin: 20px auto;
            /* 将子盒子与父盒子右边对齐, 父盒子 relative*/
            position: relative;
            /* 将鼠标设置为小手 */
            cursor: pointer;
        }
        
        .detail {
            /* display ： none 表示默认不展示 */
            display: none;
            /* 将子盒子与父盒子右边对齐, 子盒子 absolute，right表示靠右为-1px; top 是和父元素的最上面一条边框线比较*/
            position: absolute;
            right: -1px;
            top: 28px;
            z-index: -1;
            box-sizing: border-box;
            border: 1px solid lightcoral;
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 400px;
        }
        
        .shoppingcart:hover .detail {
            /* shoppingcart 接受到hover事件后，对detail类的操作 */
            display: block;
        }
        /* 鼠标移动后，shoppingcart的底部线变成白色 */
        
        .shoppingcart:hover {
            border-bottom: 1px solid white;
        }
        /* .shoppingcart:hover .detail::after {
            content: '';
            display: inline-block;
            box-sizing: border-box;
            width: 98px;
            height: 1px;
            position: absolute;
            top: -1px;
            right: 0;
            z-index: 1;
            background-color: #fff;
        } */
    </style>
</head>

<body>
    <!-- 购物车详情需要嵌套在父级购物车里 -->
    <div class="shoppingcart">
        <span>购物车</span>
        <div class="detail">
            <span>购物车详情</span>
        </div>
    </div>
</body>

</html>

z-index 属性失灵的集中情况：
z-index要结合层叠上下文（stacking context）来思考，主要优先级如下：父层叠上下文的背景和边框＜ z-index=-1 ＜块级元素＜浮动元素＜行内、行内块元素＜ z-index=0或auto ＜ z-index正数。
形成层叠上下文的条件如下：