CSS仿视频播放列表点击悬浮效果_list item hover 效果css-CSDN博客

本文链接：https://blog.csdn.net/qq_44214671/article/details/108864573

案例图：

在这里插入图片描述
要想实现该效果，得先了解

伪类选择器：
1）E:link 元素E未访问默认样式
2）E:visited 元素E访问后样式
3）E:hover 元素E鼠标悬浮样式
4）E:active 元素E鼠标点击未松开的样式

锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */

在这里插入图片描述

案例实现源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作爱奇异视频播放列表</title>
</head>
<style>
    .menu {
        list-style: none;
    }
    h3 {
        margin-left: 55px;
    }
    li {
        float: left;
        margin-left: 5px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
    }
    li h4:first-child {
        font-size: 16px;
        color: #4D4D4D;
    }
    li p:nth-of-type(1) {
        font-size: 14px;
        color: #640000;
    }
    li p:nth-of-type(2) {
        font-size: 12px;
        color: blue;
    }
    img {
        border-radius: 10px;
    }
    /*鼠标悬停设置盒子阴影*/
    li:hover {
        box-shadow: 1px 1px 5px #666;
    }
</style>
<body>
<div>
    <h3>热播</h3>
    <ul class="menu">
        <li>
            <img src="img/img1.png" alt="">
            <h4>神武赵子龙</h4>
            <p>怒，林更新不抱网红抱女神</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="img/img2.png" alt="">
            <h4>旋风十一人</h4>
            <p>胡歌变教练在撩前女友</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="img/img3.png" alt="">
            <h4>太阳的后裔</h4>
            <p>宋慧乔吃嫩草</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="img/img4.png" alt="">
            <h4>山海经之赤影传说</h4>
            <p>娜扎张翰再度联手</p>
            <p>点击次数：242445次</p>
        </li>
    </ul>
</div>
</body>
</html>