本篇內(nèi)容主要講解“如何解決多行排列圖片時(shí)hover上去加邊框擠圖片的問題”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何解決多行排列圖片時(shí)hover上去加邊框擠圖片的問題”吧!

為彭陽(yáng)等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及彭陽(yáng)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、彭陽(yáng)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

問題：
遇到多行多列排列的圖片時(shí)，hover上去加邊框會(huì)把下面的圖片擠到別處

============================================================

注意：

IE11以下瀏覽器加載圖片會(huì)默認(rèn)給它加一個(gè)1px的邊框

解決方法：對(duì)圖片設(shè)置border:none

=============================================================

hover加邊框解決方案：

原先：

代碼如下:

<li>
<img />
<h4></h4>
<p></p>
</li>

1. 對(duì)元素設(shè)置透明邊框（推薦）：

代碼如下:

li{
border:2px solid transparent;
}
li:hover{
border:2px solid red;
}

2. 對(duì)元素外再包裹一層div

更改后：

代碼如下:

<li>
<div>
<img />
<h4></h4>
<p></p>
</div>
</li>

樣式：

代碼如下:

li{
wdith:468px;
}
div{
width:468px;
margin:2px;
padding:10px;
background-color:#fff;
}
div :hover{
margin:0;
border:2px solid red;
}

另外：

使用outline IE 7、8 不支持。
但它是顯示在元素上面不會(huì)對(duì)元素加邊框。不考慮IE兼容的可以直接用outline代替border

到此，相信大家對(duì)“如何解決多行排列圖片時(shí)hover上去加邊框擠圖片的問題”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前名稱：如何解決多行排列圖片時(shí)hover上去加邊框擠圖片的問題-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://jinyejixie.com/article40/coiiho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、企業(yè)建站、定制網(wǎng)站、網(wǎng)站制作、響應(yīng)式網(wǎng)站、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)