·您当前的位置:主页 > 技术教程 > jQuery教程 >

[jQuery]jQuery实现鼠标经过div时变化色彩

时间:2017-02-20 17:41酷播
[jQuery]jQuery实现鼠标经过div时变化色彩

[jQuery]jQuery实现鼠标经过div时变化色彩

  1. <html> 
  2.  
  3. <head> 
  4.  
  5. <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> 
  6.  
  7. <style type="text/css"> 
  8.  
  9. .divbox{ 
  10.  
  11. height:300px; 
  12.  
  13. width:200px; 
  14.  
  15. background:#ffffff; 
  16.  
  17. border:solid 1px #ccc; 
  18.  
  19. float:left; 
  20.  
  21. margin-right:10px; 
  22.  
  23.  
  24. .divOver{ 
  25.  
  26. background:#eff8fe; 
  27.  
  28. border:solid 1px #d2dce3; 
  29.  
  30.  
  31. #zztj{color:#ffffff;} 
  32.  
  33. #zztj a,#zztj a:link,#zztj a:visited,#zztj a:active {color:#ffffff;} 
  34.  
  35. #zztj a:hover {color:#ffffff;} 
  36.  
  37. </style> 
  38.  
  39. <script src="/images/jquery.js"></script> 
  40.  
  41. <script language="javascript"> 
  42.  
  43. $(function(){ 
  44.  
  45. //当鼠标滑入时将div的class换成divOver 
  46.  
  47. $('.divbox').hover(function(){ 
  48.  
  49. $(this).addClass('divOver'); 
  50.  
  51. },function(){ 
  52.  
  53. //鼠标离开时移除divOver样式 
  54.  
  55. $(this).removeClass('divOver'); 
  56.  
  57.  
  58. ); 
  59.  
  60. }); 
  61.  
  62. </script> 
  63.  
  64. </head> 
  65.  
  66. <body> 
  67.  
  68. <div id="menu"> 
  69.  
  70. <div class="divbox">区块A</div> 
  71.  
  72. <div class="divbox">区块B</div> 
  73.  
  74. <div class="divbox">区块C</div> 
  75.  
  76. </div><br>提示:如果不显示预览效果,请<font color=red>刷新一下本页面</font>,因调用了远程的jquery插件,需要加载完成才能运行。 
  77.  
  78. </body> 
  79.  
  80. </html> 

 

热门文章推荐

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器