源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 鼠标移动到div上显示子div实现方法 [打印本页]

作者: 洪七公    时间: 2023-4-14 00:19
标题: 鼠标移动到div上显示子div实现方法

本例实现这样一个效果,当鼠标移动到div元素上时,显示子div,并且鼠标移到子div上子div仍然保持显示。当鼠标移出父子div时子div才又重新隐藏起来。子div显示的时候,重叠在后面其他div上,不能挤压后面其他div。

一般实现的方法有js实现或者css样式实现,css实现比较轻便,所以我比较倾向通过css完成一些特效!

本例使用CSS样式来控制,先贴代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. </head>

  7. <style>

  8. .Content{       
  9.         padding:10px 10px;10px;10px;
  10.         position:relative;  /**父元素设置为relative,不设置overflow属性,否则隐藏的子div显示出来会不正常。*/
  11.         z-index:1;
  12. }
  13. /*注:Content-Left定义多个div从左到右排列在一行,使用了float:left;*/
  14. .Content-Left{
  15.         margin-left: 0px;
  16.         margin-right: 5px;
  17.         margin-top: 0px;
  18.         margin-bottom: 0px;
  19.         border:none;
  20.         float: left;
  21.         color:#000;
  22.         position: relative;  /**父元素设置为relative,不设置overflow属性,否则隐藏的子div显示出来会不正常。*/
  23.         z-index: 1;
  24. }

  25. .hide{
  26.         /** display设置为none表示默认隐藏,这里要使用绝对定位position:absolute,可以重叠在其他div上面,显示的时候不会挤压后面的其他div。
  27.         并且,父div不能设置overflow属性,否则隐藏的div显示就无法超出父元素的当前显示的内容范围。 */
  28.         display:none;   
  29.         position:absolute;
  30.         left:0px;
  31.         top:15px;
  32.         padding:10px 10px 10px 0px;
  33.         width:100px;
  34.         z-index:1;
  35. }

  36. .Content-Left:hover .hide{  
  37.         display:block;  /** 当父div类 LinkContent-Left鼠标移上去的时候,将隐藏的子div类hide显示出来 */
  38. }  
  39. </style>

  40. <body>

  41. <!--第一行div
  42. 鼠标移到第一行div父元素的时候,子元素显示出来会重叠在第二行div上面。
  43. 因为子元素和第二行div重叠,第一行div的z-index必须比第二行div的大,
  44. 否则鼠标移出第一行div父元素的时候,还没有移入子div时,会被认为已移出第一行div,
  45. 导致第一行div的子div又隐藏起来。
  46. 这里把第一行div的z-index设置为100,第二行为99。
  47. z-index只会同级别的div有效,因此即使把第一行div的子div的z-index调高是无效的。
  48. -->
  49. <div  class="Content" style="z-index:100">
  50.         
  51.     <div class="Content-Left" >第一行div父元素A
  52.         <div  class="hide" align="left"  style="width:400px">
  53.             第一行div父元素A子div     
  54.         </div>
  55.     </div>   
  56.    
  57.     <div class="Content-Left" >|</div>
  58.    
  59.     <div class="Content-Left" >第一行div父元素B
  60.         <div  class="hide" align="left"  style="width:400px">
  61.             第一行div父元素B子div     
  62.         </div>
  63.     </div>   

  64. </div><!--第一行div结束-->

  65. <!--第二行div-->
  66. <div  class="Content" style="z-index:99">
  67.     <div class="Content-Left">第二行div</div>
  68. </div><!--第二行div结束-->

  69. </body>
  70. </html>
复制代码

代码实现说明:
两行div并列,样式为Content。

第一行div有多个div从左到右排列,样式为Content-Left。

第一行div内的元素有个子div,默认隐藏,样式为hide。当鼠标移到Content-Left元素上时,显示子元素。

实现要点:

1. 通过CSS的hover控制修改子div的display属性来实现显示隐藏的子div。
  1. .Content-Left:hover .hide{  
  2.         display:block;  /** 当父div类 LinkContent-Left鼠标移上去的时候,将隐藏的子div类hide显示出来 */
  3. }  
复制代码

2.隐藏的子div要使用绝对定位,父div使用相对定位,并且父div不能设置overflow属性,否则子div无法不挤压其他div直接重叠显示在后面的第二行div上。
hide类设置position:absolute为绝对定位。
父div类Content和Content-Left设置position: relative为相对定位,且没有overflow属性。

3.第一行div的z-index必须比它的子div会重叠显示的其他div的z-index大,否则鼠标移到被重叠div上的时候,子div又会被隐藏起来。z-index只对同级的div有效,因此设置被隐藏的子div的z-index是无效的。

本例中第一行div的z-index为100,第二行设置为99。






欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3