web開(kāi)發(fā)中如何實(shí)現(xiàn)鼠標(biāo)懸停圖片產(chǎn)生邊框的效果

本篇文章給大家分享的是有關(guān)web開(kāi)發(fā)中如何實(shí)現(xiàn)鼠標(biāo)懸停圖片產(chǎn)生邊框的效果，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元祥符做網(wǎng)站,已為上家服務(wù),為祥符各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

HTML

圖片的寬高一定要定義

  1. <div class="con">  

  2.         <img src="/upload/otherpic72/12476(1).jpg" width="360px" height="110px">  

  3.         <div class="border"></div>  

  4.     </div>  

CSS   

  1. .con {      

  2.         margin: 50px;      

  3.         position: relative;      

  4.     }      

  5.     .border {      

  6.         position: absolute;      

  7.         top: 0;      

  8.         left: 0;      

  9.         rightright: 0;      

  10.         bottombottom: 0;      

  11.     }      

  12.     .con:hover .border {      

  13.         border: 5px solid #000;      

  14.     }    


虛線

在css里面添加
CSS 

  1. <style>   

  2. td {border-bottom:1px dashed #000000;}   

  3. </style>  

實(shí)線

在css里面添加

CSS 

  1. <style>   

  2. td {border:1px solid black;}   

  3. </style>  

JS

記得先引入jQuery文件
 

JavaScript

  1. $(function () {   

  2.             var w = $('img').width();   

  3.             var h = $('img').height();   

  4.             $('.con').width(w);//設(shè)置圖片外部包裹層的寬度，也可以直接在CSS里設(shè)置  

  5.             $('.con').height(h);//設(shè)置圖片外部包裹層的高度，也可以直接在CSS里設(shè)置  

  6.             $('.border').width(w - 10);//設(shè)置邊框?qū)訉挾?，這里要減去border寬度并乘以2  

  7.             $('.border').height(h - 10);//設(shè)置邊框?qū)痈叨龋@里要減去border寬度并乘以2  

  8.         });  

    Demo

以上就是web開(kāi)發(fā)中如何實(shí)現(xiàn)鼠標(biāo)懸停圖片產(chǎn)生邊框的效果，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：web開(kāi)發(fā)中如何實(shí)現(xiàn)鼠標(biāo)懸停圖片產(chǎn)生邊框的效果
瀏覽地址：http://muchs.cn/article34/piopse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、微信小程序、域名注冊(cè)、、建站公司、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(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)

成都網(wǎng)站建設(shè)