CSS案例:土豆网鼠标经过显示遮罩

案例:土豆网鼠标经过显示遮罩

CSS案例:土豆网鼠标经过显示遮罩_第1张图片

目的:

  1. 练习元素的显示与隐藏
  2. 练习元素的定位

核心原理:

  • 原先半透明的黑色遮罩看不见, 鼠标经过大盒子,就显示出来。
  • 遮罩的盒子不占有位置, 就需要用绝对定位 和 display 配合使用。

鼠标经过显示遮罩的效果图:
CSS案例:土豆网鼠标经过显示遮罩_第2张图片
代码:

方法1:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>仿土豆网显示隐藏遮罩案例title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou .mask {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了土豆这个盒子,就让里面的遮罩层显示出来 */
        .tudou:hover .mask {
            /* 显示元素 */
            display: block;
        }
    style>
head>

<body>
    <div class="tudou">
        <div class="mask">div>
        <img src="images/tudou.jpg" alt="">
    div>
body>

html>

方法2:使用伪元素选择器

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>仿土豆网显示隐藏遮罩案例title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了土豆这个盒子,就让里面的before遮罩层显示出来 */
        .tudou:hover::before {
            /* 显示元素 */
            display: block;
        }
    style>
head>

<body>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    div>
body>

html>

你可能感兴趣的:(CSS,案例,css,html,html5)