CSS仿视频播放列表点击悬浮效果
案例图：
要想实现该效果，得先了解
伪类选择器：
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} / 选定的链接 */
案例实现源码：
<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>