hover效果加边框不抖动
前两天遇到一个hover效果给整个div加边框的问题。
html 如下
<div class="hot-recommend"> <div class="wrapper"> <div class="offer-list"> <ul class=‘underline‘> <li class="offer-list-item fd-clr"> <!-- <h3 class="title">今日热推</h3> --> <div class="offer-feature"> <dl class="fea1"> <dt><a href="">外形小巧<i class="dot"></i></a></dt> <dd><a href="">轻盈有触感，数字清晰</a></dd> </dl> <dl class="fea3"> <dt><a href="">超大屏幕<i class="dot"></i></a></dt> <dd><a href="">不锈钢笔尖圆润耐磨书写360°顺滑流畅</a></dd> </dl> </div> <div class="offer-pic"> <a href="#" title="#" target=""><img src=‘http://wd.alibaba-inc.com/i/260-260.png‘ alt=‘‘/></a></a> <i class=‘sold-out‘></i> <p class="text">已抢完<span>sold out</span></a></p> </div> <div class="offer-feature"> <dl class="fea2 "> <dt><i class="dot "></i>大按键</a></dt> <dd>墨水仓可视窗口方便观察墨量</a></dd> </dl><dl class="fea4"> <dt><i class="dot"></i>双电源</a></dt> <dd>直液式控墨系统出墨匀保证用完最后一滴</a></dd> </dl> </div> <div class="offer-detail"> <dl class="offer-introduce"> <dt class=‘offer-title‘><span>deli/得力 837ES 经济型太阳能双电源计算器</span><i ></i></dt> <dd class=‘offer-slogan‘>7月7日雨，白雪直液式中性笔今日首发。9.8一盒含泪卖，比圆珠笔更低的价格，走珠笔的顺滑手感，你值得拥有！和圆珠笔说拜拜~</dd> </dl> <p class="timeout"><i class=‘timeout-icon‘></i><span>限时特惠 <span class="month"></span>月<span class="day"></span>天<span class="hour"></span>小时<span class="minute"></span>分钟<span class="second"></span>秒</span></p> <p class="offer-price"> <span class="price-cur"><i class="fd-cny">¥</i><span class="split"><em>555.99</em></span><i class="unit">/个</i></span> <span class="price-old"><i class="fd-cny">¥</i><strike>163.00<i class="unit">/个</strike></i></span> <i class="tax-icon"></i> </p> <p class="offer-count"> <span class="sale"><span class=‘sale-count‘>53</span><i class="unit">个</i>已售</span> <i class=‘space‘> | </i> <span class="inventory">剩余<span class=‘inventory-count‘>222</span><i class="unit">个</i>库存</span> </p> <a class="buy" href="" target="" title="">立即抢购</a> </div> </li> </ul> </div> </div> </div>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
less文件
.offer-list{
&:hover{ border:solid 2px #027CFF;
height:372px;
margin: -1px -2px 0-2px;
.offer-list-item{ margin-top: -1px;
}
} .underline{ border-bottom: solid 1px #e3e3e3;
} ul{ margin-left: 10px;
} .offer-list-item{ height: 372px;
}
}12345678910111213141516171819遇到的主要问题是hover后文字抖动，并且边框不能完美覆盖之前每个div下部的分割线。
解决方案：
1 遮挡分割线，整个加hover的div上移1px。
2 解决抖动问题，减少div的height。
方向是这两个，但是.first-list 的margin上移带来了其他问题，就是虽然高度设了，但hover时还是会向下掉1px。
这个问题找了好久，发现原来外层div margin为负时，并不会把这个div块都带着移动，里层的li就没有跟着移动，所以出现了怎么调都还是会看到div块向下抖动的问题，并且下边框还出现了遮住1px的问题。问题是ul层也没有设置overflow：hidden。
后来想到了给li用一个margin：-1px。两个问题一起解决啦。不过下边框被遮住的应该是是因为div设置的高度值问题。
其实有种比较简单的解决方法，那就是hover之前给div加白色边框占位，hover改变border颜色。这样很简单，但是不够通用，在这里就用不了，因为页面上有一个div的左上角有一个背景图片，白色的边框会在上面留下痕迹。没办法用。
margin经常会出现无效的情况，之前有遇到过，在这里也总结一下。
margin-top失效
<div> <divclassdivclass="box1">float:left</div> <divclassdivclass="box2">clear:both;margin-top:20px;</div> </div> 1234
网上能找到的两种比较靠谱的解释：
1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…” 2：当第一个层浮动，而第二个没浮动层的margin会被压缩，详见--浮动元素后非浮动元素的margin的处理。 得到解决问题思路：1一起浮动 2 两个div中间加一个div清除浮动。
2父元素里第一个子元素margin-top失效。它会默认为是父元素的margin。
解决办法：
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top
知其然，知其所以然。
http://www.wcwone.com/sell/4390/1075622.html
http://www.wcwone.com/sell/4390/1075618.html
http://www.wcwone.com/sell/4390/1075613.html
http://www.wcwone.com/sell/4390/1075602.html
http://www.wcwone.com/sell/4390/1075594.html
http://www.wcwone.com/sell/4390/1080103.html
http://www.wcwone.com/sell/4390/1080028.html
http://www.wcwone.com/sell/4390/1080034.html
http://www.wcwone.com/sell/4390/1080037.html
http://www.wcwone.com/sell/4390/1080098.html
http://www.wcwone.com/sell/4391/854801.html
http://www.wcwone.com/buy/438/72489.html
http://www.wcwone.com/buy/438/72490.html
http://www.wcwone.com/buy/438/72491.html
http://www.wcwone.com/buy/438/72492.html
http://www.wcwone.com/buy/438/72493.html
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780175
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780176
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780174
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780173
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780172
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780171
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780170
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780169
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780168
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780167
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780166
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780165
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780164
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780163
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780161
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780160
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780159
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780158
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780157
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780156
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780155
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780154
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780153
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780152
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780151
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780150
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780149
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780148
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780147
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780117
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780118
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780119
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780120
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780121
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780122
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780123
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780124
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780125
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780126
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780127
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780128
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780129
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780130
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780131
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780132
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780133
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780134
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780135
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780136
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780137
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780138
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780139
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780140
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780141
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780142
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780143
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780144
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780145
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780146
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780087
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780088
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780089
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780090
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780091
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780092
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780093
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780094
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780095
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780096
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780097
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780098
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780099
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780100
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780101
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780102
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780103
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780104
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780105
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780106
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780107
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780108
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780109
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780110
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780111
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780112
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780113
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780114
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780115
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780116
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780057
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780058
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780059
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780060
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780061
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780062
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780063
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780064
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780065
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780066
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780067
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780068
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780069
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780070
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780071
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780072
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780073
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780074
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780075
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780076
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780077
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780078
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780079
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780080
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780081
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780082
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780083
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780084
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780085
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780086
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780026
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780027
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780028
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780029
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780030
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780031
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780032
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780033
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780034
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780035
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780036
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780037
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780039
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780040
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780041
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780042
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780043
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780044
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780045
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780046
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780047
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780048
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780049
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780050
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780051
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780052
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780053
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780054
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780055
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780056
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780012
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780025
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780024
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780023
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780022
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780021
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780020
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780018
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780017
http://chinaxinge.com/gdgs/sty35/style_newsshow.asp?id=84662&newsid=2780013