[04-06]鼠标悬停图片时，实现抖动效果

佚名 6年前 (2019-05-13) 随笔 775人围观抢沙发百度已收录

<!DOCTYPE html> <html lang="zh"> <head> 　　<meta charset="UTF-8"> 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"> 　　<meta http-equiv="X-UA-Compatible" content="ie=edge"> 　　<title>鼠标悬停图片时，实现抖动效果</title> 　　<link rel="stylesheet" href="16.css"> </head> <body> 　　<ul> 　　　　<li> 　　　　　　<img src="./img/shengdanshu-001.jpg"/> 　　　　　　<p > 　　　　　　　　景色不错！djfdfj jjgfisdj gsdj sjidgj s sdgj sdgjg sgjsg sgjs 　　　　　　</p> 　　　　</li> 　　　　<li> 　　　　　　<img src="./img/donggong_bowuguan-002.jpg"/> 　　　　　　<p>房子不错！</p> 　　　　</li> </body> </html> /*鼠标悬停时，让li向右上方偏移2px，从而实现抖动的效果*/ /*伪类选择器,hover 当鼠标悬停至元素上方时，向该元素添加样式；*/ li:hover{ 　　position:relative;/*意思是指要相对定位了*/ 　　left: 200px; 　　top: -200px; }