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

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

  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正数。
形成层叠上下文的条件如下:

  1. html根元素自动形成根层叠上下文
  2. position为相对或绝对,且z-index不是auto
  3. position为固定或粘性

你可能感兴趣的:(css,css3,html)