实现鼠标放到一个div上显示出另一个隐藏的div

来源:互联网 发布:淘宝店铺怎么装修好看 编辑:程序博客网 时间:2024/05/18 18:00
  1. <!DOCTYPE html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>CSS Test Page</title>  
  6.     <style type="text/css">  
  7.         .b{  
  8.             opacity: 0;  /* b div 隐藏*/
  9.         }  
  10.         .a:hover .b{    
  11.             opacity: 1;  /* 鼠标经过 a div 时 b div 显示*/
  12.         }  
  13.     </style>  
  14. </head>  
  15. <body>  
  16.   
  17. <div class="a">  
  18.     This is the a div  
  19.     <div class="b">  
  20.         <p>this is b div</p>  /* a div 嵌套 b div*/
  21.     </div>  
  22. </div>  
  23.   
  24. </body>  
  25. </html>  
阅读全文
1 0