CSS仿视频播放列表点击悬浮效果

案例图:

CSS仿视频播放列表点击悬浮效果_第1张图片
要想实现该效果,得先了解

伪类选择器:
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} /
选定的链接 */

CSS仿视频播放列表点击悬浮效果_第2张图片

案例实现源码:


<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>

你可能感兴趣的:(前端开发学习笔记,html,css)