标签:
给所有div加上边框=10px之后,再给所有div设置margin-left与margin-top;以及浮动(float:left)
因此时需要鼠标悬停效果:所以设置给div设置伪类:hover,然因浮动脱离了标准流。所以覆盖了div的边框,所以鼠标悬停时div边框显示不全设置定位(position:releative;)之后;
经测验:在html中的层级关系为;标准流<浮动流<定位;所以现在鼠标悬停时div所有的边框都会显示,可以模仿淘宝案例等;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 400px; height: 200px; border:10px solid #ccc; float: left; margin-left: -10px; margin-top:-10px; } div:hover{ border-color: red; position: relative; } .content{ width: 1620px; height: 600px; padding: 20px; border:none;} </style> </head> <body> <div class="content"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/lcf1314/p/5493298.html