圖片邊框變換CSSHover狀態(tài)效果一例_DIV+CSS實(shí)例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
我們可能會(huì)經(jīng)常用到此效果，在傳統(tǒng)的做法中，這一效果的實(shí)現(xiàn)是比較困難或繁瑣的，現(xiàn)在通過CSS實(shí)現(xiàn)鼠標(biāo)移至圖片，邊框發(fā)生變換的效果，是非常輕易的。我們看下面的代碼。
CSS代碼：
示例代碼 [www.ghpqjb.com]
p#outer {
margin:0 auto;
width:202px;
}
#outer a {
margin:0px;
display:block;
position: relative;
border:1px solid #069;
}
#outer a:hover {border:1px dashed #c00;}
#outer img {display:block;border:none;background:#069;}
margin:0 auto;
width:202px;
}
#outer a {
margin:0px;
display:block;
position: relative;
border:1px solid #069;
}
#outer a:hover {border:1px dashed #c00;}
#outer img {display:block;border:none;background:#069;}
XHTML代碼：
示例代碼 [www.ghpqjb.com]
<p id="outer"><a href="#">
<img src="http://p1.mb5u.com/divcss/logo3.gif" alt="www.ghpqjb.com" width="200" height="90" /></a>
</p>
<img src="http://p1.mb5u.com/divcss/logo3.gif" alt="www.ghpqjb.com" width="200" height="90" /></a>
</p>
查看運(yùn)行效果：
代碼調(diào)試框 [www.ghpqjb.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)DIV+CSS實(shí)例：
- 固定div容器的寬高，圖片居中（圖片不限制大小）
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時(shí)間
- CSS技巧：text-indent隱藏文字(以圖換字)
- CSS實(shí)例：三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例：很實(shí)用的圖文混排CSS列表-富有語義
- DivCSS實(shí)例：CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- CSS菜單：由CSS滑動(dòng)門技術(shù)實(shí)現(xiàn)的菜單十一款
- DIVCSS橫向菜單實(shí)例：簡(jiǎn)單的思路陷下的風(fēng)格不錯(cuò)的效果
- DivCSS實(shí)例：一個(gè)效果很不錯(cuò)的CSS列表
- 三列自由式布局770-1024自適應(yīng)寬度！
- CSS布局實(shí)例：CSS標(biāo)簽切換代碼實(shí)例教程
- DIVCSS實(shí)例：橙藍(lán)互換的CSS翻頁效果
- CSS實(shí)例：Unobtrusive頁簽切換符合Web標(biāo)準(zhǔn)具有html語義
- CSS實(shí)例：區(qū)分IE6、IE7、FF對(duì)HR解釋的CSShack
- DIV CSS布局入門示例(五)border和clear
- CSS布局實(shí)例：僅一張圖片實(shí)現(xiàn)圓角！
猜你也喜歡看這些
- DivCSS實(shí)例教程：分享非常不錯(cuò)的頁面制作方法
- IE捉迷藏bug詳解(躲貓貓)
- WEB2.0標(biāo)準(zhǔn)教程：第二天什么是名字空間
- CSS初學(xué)者技巧：談CSS的標(biāo)準(zhǔn)和最佳示例
- float和position屬性的區(qū)別和使用方法
- 關(guān)于條件注釋的幾個(gè)實(shí)例代碼
- CSS網(wǎng)頁布局:二列固定寬度居中
- CSSfloats來創(chuàng)建三欄網(wǎng)頁布局的方法
- DIVCSS網(wǎng)頁布局：三行三列自適應(yīng)高度的DIV布局
- 酷：你的標(biāo)記你作主，自定義標(biāo)記網(wǎng)頁布局！
- 相關(guān)鏈接：
- 教程說明：
DIV+CSS實(shí)例-圖片邊框變換CSSHover狀態(tài)效果一例
。