css 选择器方法 :hover

最新推荐文章于 2024-04-19 15:57:51 发布

FakeOccupational

最新推荐文章于 2024-04-19 15:57:51 发布

阅读量338

点赞数

分类专栏：服务化&架构

本文链接：https://blog.csdn.net/ResumeProject/article/details/108152143

版权

服务化&架构专栏收录该内容

103 篇文章 0 订阅

订阅专栏

css 选择器方法 hover、focus、active、link、visited

hover 英[ˈhɒvə®]
美[ˈhʌvər]
v. 翱翔; 盘旋; 踌躇，彷徨(尤指在某人身边); 靠近(某事物); 处于不稳定状态;
1.html

<!DOCTYPE html>
<html lang="en"><!--提示是否翻译的-->
<head>
    <meta charset="UTF-8">
    <title>划过显示详情</title>
    <!--import css-->
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box{
            
            box-sizing: border-box;/*盒子最终的宽高*/
            width: 200px;
            height: 40px;
            border: 1px solid lightcoral;
            margin: 20px auto;/*20与其他的上下位置  位置居中*/

            text-align: center;/*水平居中*/
            line-height: 40px;/*与height相同 为垂直居中*/

            position: relative;/*子元素相对于父元素定位*/

            
        }

        .box .detail{
            display: none;/*默认隐藏*/
            position: absolute;/*定位*/
            right: -1px;/*定位 左边衔接*/
            top: 38px;

            box-sizing: border-box;/*盒子最终的宽高*/
            width: 500px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid lightcoral;
            z-index: -1;/*层级 默认为零 detail 是子元素 调box是一起的*/
        }
        .box:hover .detail{/*.box:hover划过事件*/
            display: block;
        }
        .box:hover{
            border-bottom-color: azure;
           /* z-index: 1;*/
        }
        /*点击实现，可用：target 实现手风琴效果*/
    </style>


</head>
<body>
    <!--基于CSS实现，需要详情区域是按钮的子元素-->
    <div class="box">
        <span>购物车</span>
        <div class="detail">
            详细信息
        </div>
    </div>
</body>
</html>