视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 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.  
  25. .divOver{ 
  26.  
  27. background:#eff8fe; 
  28.  
  29. border:solid 1px #d2dce3; 
  30.  
  31. } 
  32.  
  33. #zztj{color:#ffffff;} 
  34.  
  35. #zztj a,#zztj a:link,#zztj a:visited,#zztj a:active {color:#ffffff;} 
  36.  
  37. #zztj a:hover {color:#ffffff;} 
  38.  
  39. </style> 
  40.  
  41. <script src="/images/jquery.js"></script> 
  42.  
  43. <script language="javascript"> 
  44.  
  45. $(function(){ 
  46.  
  47. //当鼠标滑入时将div的class换成divOver 
  48.  
  49. $('.divbox').hover(function(){ 
  50.  
  51. $(this).addClass('divOver'); 
  52.  
  53. },function(){ 
  54.  
  55. //鼠标离开时移除divOver样式 
  56.  
  57. $(this).removeClass('divOver'); 
  58.  
  59. } 
  60.  
  61. ); 
  62.  
  63. }); 
  64.  
  65. </script> 
  66.  
  67. </head> 
  68.  
  69. <body> 
  70.  
  71. <div id="menu"> 
  72.  
  73. <div class="divbox">区块A</div> 
  74.  
  75. <div class="divbox">区块B</div> 
  76.  
  77. <div class="divbox">区块C</div> 
  78.  
  79. </div><br>提示：如果不显示预览效果，请<font color=red>刷新一下本页面</font>，因调用了远程的jquery插件，需要加载完成才能运行。 
  80.  
  81. </body> 
  82.  
  83. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器