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

标题: 鼠标移动到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>

  8. <style>

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

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

  40. .Content-Left:hover .hide{  
  41.         display:block;  /** 当父div类 LinkContent-Left鼠标移上去的时候，将隐藏的子div类hide显示出来 */
  42. }  
  43. </style>

  45. <body>

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

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

  73. <!--第二行div-->
  74. <div  class="Content" style="z-index:99">
  75.     <div class="Content-Left">第二行div</div>
  76. </div><!--第二行div结束-->

  78. </body>
  79. </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