源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 2632|回复: 0

[CSS/Html] 鼠标移动到div上显示子div实现方法

[复制链接]

3114

主题

3516

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
276079
发表于 2023-4-14 00:19:45 | 显示全部楼层 |阅读模式

本例实现这样一个效果,当鼠标移动到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。

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-7-23 13:34 , Processed in 0.146986 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明