前兩天遇到乙個hover效果給整個div加邊框的問題。
html 如下
class="hot-recommend">
class="offer-list">
class='underline'>
class="offer-list-item fd-clr">
class="offer-feature">
class="fea1">
href="">外形小巧
class="dot">
i>
a>
dt>
href="">輕盈有觸感，數字清晰a>
dd>
dl>
class="fea3">
href="">超大螢幕
class="dot">
i>
a>
dt>
href="">不鏽鋼筆尖圓潤耐磨書寫360°順滑流暢a>
dd>
dl>
div>
class="offer-pic">
href="#"
title="#"
target="">
src=''
alt=''/>
a>
a>
class='sold-out'>
i>
class="text">已搶完sold outspan>
a>
p>
div>
class="offer-feature">
class="fea2 ">
class="dot ">
i>大按鍵a>
dt>
墨水倉可視視窗方便觀察墨量a>
dd>
dl>
class="fea4">
class="dot">
i>雙電源a>
dt>
直液式控墨系統出墨勻保證用完最後一滴a>
dd>
dl>
div>
class="offer-detail">
class="offer-introduce">
class='offer-title'>
deli/得力 837es 經濟型太陽能雙電源計算器span>
i>
dt>
class='offer-slogan'>7月7日雨，白雪直液式中性筆今日首發。9.8一盒含淚賣，比原子筆更低的**，走珠筆的順滑手感，你值得擁有！和原子筆說拜拜~dd>
dl>
class="timeout">
class='timeout-icon'>
i>
限時特惠
class="month">
span>月
class="day">
span>天
class="hour">
span>小時
class="minute">
span>分鐘
class="second">
span>秒span>
p>
class="offer-price">
class="price-cur">
class="fd-cny">¥i>
class="split">
555.99em>
span>
class="unit">/個i>
span>
class="price-old">
class="fd-cny">¥i>
163.00
class="unit">/個strike>
i>
span>
class="tax-icon">
i>
p>
class="offer-count">
class="sale">
class='sale-count'>53span>
class="unit">個i>已售span>
class='space'> | i>
class="inventory">剩餘
class='inventory-count'>222span>
class="unit">個i>庫存span>
p>
class="buy"
href=""
target=""
title="">立即搶購a>
div>
li>
ul>
div>
div>
div>less檔案
.offer-list
ul.offer-list-item
}遇到的主要問題是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失效
"box1">float:leftdiv>
"box2">clear:both;margin-top:20px;div>
div>網上能找到的兩種比較靠譜的解釋：
1：「在css2.1中，水平的margin不會被摺疊；垂直margin可能在一些盒模型中被摺疊…」
2：當第乙個層浮動，而第二個沒浮動層的margin會被壓縮，詳見--浮動元素後非浮動元素的margin的處理。
得到解決問題思路：1一起浮動 2 兩個div中間加乙個div清除浮動。
解決辦法：
1.給父容器box加overflow:hidden;屬性
2.父容器box加border除none以外的屬性
3.用父容器box的padding-top代替margin-top
UImageview加邊框 加陰影
uiimageview imgvphoto uiimageview alloc init 新增邊框 calayer layer imgvphoto layer layer.bordercolor uicolor whitecolor cgcolor layer.borderwidth 5.0f 新增...
給li設定hover效果
想做導航時滑鼠滑過導航的欄目時，導航欄目的背景發生變化，目前羅列下我使用的方法，存在的更多方法需要我去發現學習！1.首頁 新聞 li a li a hover 就是在li中放入a標籤，並把它設定塊級元素，通過a hover達到滑過li的效果。2.li hover 在ie7，ie8測試很成功，這種方法...
特效 hover向上翻轉效果
前段時間做了很多有關css3動畫的專案。雖然當時都較圓滿的完成了，但事後還是要總結一下的，趁著近期工作不忙，系統的學習了一些動畫理論，重點看了transform3d變換，學習了translate平移 scale縮放 rotate旋轉 並實踐了perspective透視屬性的作用在 在 上瀏覽了一些動...