鼠標懸停圖片產生邊,框的效果實現

發布時間:2017-06-15 08:01 來源:互聯網 當前欄目:網頁設計教程

   HTML

  圖片的寬高一定要定義

  XML/HTML Code復制內容到剪貼板

  

 

  鼠標懸停圖片產生邊框的效果實現  電腦高手

  

 

 

  

 

  CSS

  CSS Code復制內容到剪貼板

  .con {

  margin: 50px;

  position: relative;

  }

  .border {

  position: absolute;

  top: 0;

  left: 0;

  rightright: 0;

  bottombottom: 0;

  }

  .con:hover .border {

  border: 5px solid #000;

  }

  虛線

  在css里面添加

  CSS Code復制內容到剪貼板

  

  實線

  在css里面添加

  CSS Code復制內容到剪貼板

  

  JS

  記得先引入jQuery文件

  JavaScri

宇宙探索[www.9-39.com/html/explore/]
pt Code復制內容到剪貼板

  $(function () {

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

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

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

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

  $('.border').width(w - 10);//設置邊框層寬度,這里要減去border寬度并乘以2

  $('.border').height(h - 10);//設置邊框層高度,這里要減去border寬度并乘以2

  });

  Demo

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、