标签：
某东效果：
简易实现效果：
P.S：图片不是重点....
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> body{ padding: 0px; margin: 0px; font-family: "华文行楷"; } .st-1{ width: 35px; height: 35px; background-color: #666; position: relative; left: 95%; top: 100px; border-radius:6px; margin-top: 4px; } img{ margin: 8px; } .st-1:hover{ background:pink; border-radius: 0 6px 6px 0; } .st-1:hover div{ height: 35px; width: 75px; background: pink; position: absolute; left: -72px; top:0px; border-radius:6px 0 0 6px; } .st-1:hover div:after{ display: block; color: #666; content: "购物车"; padding: 10px; } </style> <body> <div class="st"> <div class="st-1"> <img src="1.jpg" /> <div></div> </div> <div class="st-1"> <img src="2.jpg" /> <div></div> </div> <div class="st-1"> <img src="3.jpg" /> <div></div> </div> <div class="st-1"> <img src="4.jpg" /> <div></div> </div> <div class="st-1"> <img src="5.jpg" /> <div></div> </div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/Harold-Hua/p/5243422.html
