HTML实现弹出层

leopard/ˈlepərd/ 豹子,豹纹

弹出层指的是鼠标悬停于某个元素之上时显示的一个界面组件。

关注和理解特性:z-index属性和动态生成HTML元素。

HTML5新增:

figure:媒体内容(图像,音频,视频),用于包含一组相关元素。

figcaption:为figure提供说明性文本,在figure中只能 有一个,并且在第一个或者最后一个位置。

并排显示:某度上的图片

代码:6.3.弹出层.html

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        figure {
            width: 144px;
            height: 153px;
            margin: 20px 20px;
            border: 1px solid #666;
            position: relative;
            float: left;
        }

        img {
            width: 144px;
            height: 153px;
            display: block;
        }
    </style>
</head>

<body>
    <figure>
        <img src="img/pink.jpg" alt="pink heels" />
        <figcaption>
            <h3>Pink Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="img/baowen.jpg" alt="baowen heels" />
        <figcaption>
            <h3>Leopard Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="img/red.jpg" alt="red heels" />
        <figcaption>
            <h3>Red Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
</body>

</html>

6.3.1 堆叠上下文z-index

隐藏弹出层,悬停显示弹出层

增加CSS:

html 复制代码
figcaption {
            display: none;
            /* 隐藏弹出层 */
            position: absolute;
            /* 相对于容器 */
            left: 74%;
            /* 放到右边 */
            top: 15px;
            width: 130px;
            /* 弹出层宽度 */
            padding: 10px;
            /* 弹出层内边距 */
            background-color: #f2eaea;
            border: 3px solid red;
            border-radius: 6px;
        }

        /* 鼠标悬停在图片上显示 */
        figure:hover figcaption {
            display: block;
        }

        figcaption h3 {
            /*弹出层的内容*/
            font-size: 14px;
            color: #666;
            margin-bottom: 6px;
        }

        figcaption a {
            /*弹出层的内容*/
            display: block;
            text-decoration: none;
            font-size: 12px;
            color: #000;
        }
        
    /* 把弹出层设置为最高层 */
    figure:hover figcaption {
        display: block;
        z-index: 2;
    }

6.3.2 用CSS创造三角形

用div来创建,角上是平分的,所以要是内部宽高为0,其他边透明,正好是三角形。

代码:

html 复制代码
div {
    border: 12px solid;
    width: 0;
    height: 0;
    border-color: transparent red transparent transparent;
}

与伪元素after结合起来,在6.3.弹出层.html中增加CSS:

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        figure {
            width: 144px;
            height: 153px;
            margin: 20px 20px;
            border: 1px solid #666;
            position: relative;
            float: left;
        }

        img {
            width: 144px;
            height: 153px;
            display: block;
        }

        figcaption {
            display: none;
            /* 隐藏弹出层 */
            position: absolute;
            /* 相对于容器 */
            left: 74%;
            /* 放到右边 */
            top: 15px;
            width: 130px;
            /* 弹出层宽度 */
            padding: 10px;
            /* 弹出层内边距 */
            background-color: #f2eaea;
            border: 3px solid red;
            border-radius: 6px;
        }

        /* 鼠标悬停在图片上显示 */
        figure:hover figcaption {
            display: block;
        }

        figcaption h3 {
            /*弹出层的内容*/
            font-size: 14px;
            color: #666;
            margin-bottom: 6px;
        }

        figcaption a {
            /*弹出层的内容*/
            display: block;
            text-decoration: none;
            font-size: 12px;
            color: #000;
        }

        /* 把弹出层设置为最高层 */
        figure:hover figcaption {
            display: block;
            z-index: 2;
        }

        /* 红色三角形盒子 */
        figcaption::after {
            content: "";
            position: absolute;
            border: 12px solid;
            border-color: transparent red transparent transparent;
            height: 0px;
            width: 0px;
            top: 17px;
            right: 100%;
        }
    </style>
</head>

<body>
    <figure>
        <img src="img/pink.jpg" alt="pink heels" />
        <figcaption>
            <h3>Pink Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="img/baowen.jpg" alt="baowen heels" />
        <figcaption>
            <h3>Leopard Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="img/red.jpg" alt="red heels" />
        <figcaption>
            <h3>Red Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
</body>

</html>
相关推荐
浩星21 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
技术钱21 小时前
element plus 多个form校验
前端
yume_sibai21 小时前
HTML HTML基础(3)
前端·html
米花丶21 小时前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
萌萌哒草头将军1 天前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。1 天前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6661 天前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛1 天前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴1 天前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
恋猫de小郭1 天前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter