首页>>Jquery图片>>jQuery悬停弹出遮罩显示按钮代码,可以是文字，图片等(2016-04-08)

jQuery悬停弹出遮罩显示按钮代码,可以是文字，图片等

 鼠标经过遮罩文字或者多个图片均可以显示，并有不同的进场效果

jQuery悬停弹出遮罩显示按钮代码,可以是文字，图片等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="container">  
  2.   <div class="main_box user_style1" data-hipop="one">  
  3.     <img src="images/1.jpg"> <a href="#" class="popup"> </a></div>  
  4.   <div class="main_box user_style2" data-hipop="two">  
  5.     <img src="images/2.jpg"> <a href="#" class="popup"> </a><a href="#" class="popup2"></a></div>  
  6.   <div class="main_box user_style3" data-hipop="one-horizontal">  
  7.     <img src="images/3.jpg"> <a href="#" class="popup"> BUY</a> </div>  
  8.   <div class="main_box user_style4" data-hipop="two-horizontal">  
  9.     <img src="images/4.jpg"> <a href="#" class="popup"> </a><a href="#" class="popup2"></a></div>  
  10.   <div class="main_box user_style5" data-hipop="text_content">  
  11.     <img src="images/5.jpg" title alt="Img preview">  
  12.     <p class="textTitle"> Title Here </p>  
  13.     <p class="textBox">  
  14.       Lorem ipsum dolor sit amet, consectetur adipiscing   
  15.       elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel   
  16.       gravida non, egestas nec eros. Vivamus euismod, erat quis lobortis ullamcorper,   
  17.       libero justo hendrerit velit, in ornare erat ipsum scelerisque nisl. Etiam   
  18.       pharetra sodales dui, nec dignissim nisi adipiscing vel. Integer luctus   
  19.       mi elementum mi ullamcorper eu varius enim rutrum. Morbi gravida dolor eu   
  20.       leo dictum vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing   
  21.       elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel   
  22.       gravida non, egestas nec eros. <a href="#">Read More</a>  
  23.     </p>  
  24.   </div>  
  25.   <div class="main_box user_style6" data-hipop="text_content">  
  26.     <img src="images/6.jpg" title alt="Img preview">  
  27.     <p class="textTitle"> Title Here </p>  
  28.     <p class="textBox">  
  29.       Lorem ipsum dolor sit amet, consectetur adipiscing   
  30.       elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel   
  31.       gravida non, egestas nec eros. Vivamus euismod, erat quis lobortis ullamcorper,   
  32.       libero justo hendrerit velit, in ornare erat ipsum scelerisque nisl. <a href="#">Link</a>  
  33.     </p>  
  34.   </div>  
  35.   <div class="main_box user_style11" data-hipop="text_content2">  
  36.     <img src="images/11.jpg" title alt="Img preview">  
  37.     <p class="textTitle"> $7 </p>  
  38.     <p class="textBox">  
  39.       Lorem ipsum dolor sit amet, consectetur adipiscing   
  40.       elit. Ut nec est viverra velit venenatis faucibus. Maecenas adipiscing,   
  41.       lectus a hendrerit vulputate, tellus urna accumsan felis, semper tempor   
  42.       mauris massa in odio. Duis sit amet nunc eu sem sagittis malesuada. <a href="#">Link</a>  
  43.     </p>  
  44.   </div>  
  45.   <div class="main_box user_style12" data-hipop="one-horizontal">  
  46.     <img src="images/12.jpg"> <a href="#" class="popup"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec est viverra   
  47.     velit venenatis faucibus. Maecenas adipiscing, lectus a hendrerit vulputate,   
  48.     tellus urna accumsan felis, semper tempor mauris massa in odio. Duis sit   
  49.     amet nunc eu sem sagittis malesuada. </a></div>  
  50.   <div class="main_box user_style13" data-hipop="one">  
  51.     <img src="images/13.jpg"> <a href="#" class="popup"> </a></div>  
  52.   <div class="main_box user_style7" data-hipop="text_content2">  
  53.     <img src="images/7.jpg" title alt="Img preview">  
  54.     <p class="textTitle"> Title Here </p>  
  55.     <p class="textBox">  
  56.       Lorem ipsum dolor sit amet, consectetur adipiscing   
  57.       elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel   
  58.       gravida non, egestas nec eros. <a href="#">Link</a>  
  59.     </p>  
  60.   </div>  
  61.   <div class="main_box user_style8" data-hipop="rub">  
  62.     <img src="images/8.jpg"> <a href="#" class="r_board">AWESOME</a> </div>  
  63.   <div class="main_box user_style9" data-hipop="rub">  
  64.     <img src="images/9.jpg"> <a href="#" class="r_board"></a></div>  
  65.   <div class="main_box user_style10" data-hipop="rub">  
  66.     <img src="images/10.jpg"> <a href="#" class="r_board">$7</a> </div>  
  67. </div>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_544.html