鼠标移动到div上显示子div实现要点

最新推荐文章于 2024-09-02 14:00:16 发布
最新推荐文章于 2024-09-02 14:00:16 发布
阅读量5.8k 收藏 13
点赞数 5
分类专栏： 网页开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dog_in_yellow/article/details/63684462
版权

本例实现这样一个效果，当鼠标移动到div元素上时，显示子div，并且鼠标移到子div上子div仍然保持显示。当鼠标移出父子div时子div才又重新隐藏起来。子div显示的时候，重叠在后面其他div上，不能挤压后面其他div。网上找了很多例子没法完全达到这个效果，自己经过各种试验折腾了一天才搞出来，记录下来备忘。


本例使用CSS样式来控制，先贴代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>






<style>




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






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




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




</style>


<body>






<!--第一行div
鼠标移到第一行div父元素的时候，子元素显示出来会重叠在第二行div上面。
因为子元素和第二行div重叠，第一行div的z-index必须比第二行div的大，
否则鼠标移出第一行div父元素的时候，还没有移入子div时，会被认为已移出第一行div，
导致第一行div的子div又隐藏起来。
这里把第一行div的z-index设置为100，第二行为99。
z-index只会同级别的div有效，因此即使把第一行div的子div的z-index调高是无效的。
-->
<div  class="Content" style="z-index:100">
        
    <div class="Content-Left" >第一行div父元素A
        <div  class="hide" align="left"  style="width:400px">
            第一行div父元素A子div     
        </div>
    </div>   
    
    <div class="Content-Left" >|</div>
    
    <div class="Content-Left" >第一行div父元素B
        <div  class="hide" align="left"  style="width:400px">
            第一行div父元素B子div     
        </div>
    </div>   




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




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






</body>
</html>

代码实现说明：

两行div并列，样式为Content。

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

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


实现要点：

1. 通过CSS的hover控制修改子div的display属性来实现显示隐藏的子div。

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

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。









dog_in_yellow
关注
专栏目录
鼠标放上去显示div
05-08
鼠标放上去显示div,当鼠标移动上去显示一个层
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
11-17
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
使用html5+css3+JavaScript+jQuery实现鼠标进入父元素便呈现子元素离开子元素便消失
m0_74049496的博客
05-13 358
HTML首先，我们创建一个简单的HTML结构，包含一个父元素和一个子元素。子元素默认是隐藏的。
Debug-025-鼠标悬浮hover在父元素上修改子元素样式
最新发布
LM0916的博客
09-02 293
鼠标移入父元素之后子元素修改样式。
当鼠标hover经过的时候, 控制子元素的显示与隐藏
m0_71939262的博客
04-05 313
鼠标滑过div出现另一个div并且点击会固定
weixin_45646663的博客
05-08 755
【代码】鼠标滑过div出现另一个div并且点击会固定。
css 鼠标放置到一个div上，使得另外一个隐藏的div显示
黄坤的博客
04-13 8129
首先先看两个div之间的关系，选择下面的哪种方式。 控制div：hover 关系 被控制div{ css的操作； } . 举个例子，下面两个div，是父子关系，放置到一个div上，使得另外一个隐藏的div显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style&...
js实现鼠标拖动功能
10-20
实现鼠标拖拽功能的要点还包括处理`onmouseup`事件，以清除`onmousemove`和`onmouseup`事件处理器，防止在鼠标释放后仍响应鼠标移动事件，从而避免拖拽操作结束后元素位置异常。 最后，为了更好地理解上述过程，...
js实现可拖动DIV的方法
10-26
4. 更新DIV位置：当捕捉到mousemove事件时，我们需要计算鼠标移动的新位置，并将这个新位置应用到DIV元素的CSS样式上，使得DIV跟随鼠标移动。这通常涉及到计算鼠标移动的偏移量，并设置DIV的left和top属性。 5. ...
鼠标移动到图片或者文字上浮现图片
04-10
标题中的“鼠标移动到图片或者文字上浮现图片”是一种常见的网页交互效果，通常被称为“悬停弹出”或“mouseover提示”。这种效果在网站设计中很常见，它可以帮助用户预览图片或获取文字的附加信息，提升用户体验。...
【JavaScript源代码】js实现鼠标移入移出卡片切换内容.docx
12-29
本案例旨在创建一个响应式的卡片菜单系统，当用户鼠标移入卡片时，显示相应的子菜单内容；当鼠标移出时，则隐藏这些内容。这种效果常见于电子商务网站或拥有大量分类信息的站点上，能够帮助用户快速浏览和查找所需...
鼠标移上显示一个div的代码
03-31
鼠标移上能弹出一个div 的下拉框，可以点击里面的链接，鼠标移开是关闭下拉框
鼠标移动到div上显示制定信息或者div（自适应显示位置）
10-11
鼠标移动到div上弹出div或者信息，并且自适应显示位置；每一步代码都有详细的解释；简单，通俗易懂
CSS实现带箭头的DIV(鼠标放上显示提示框)
01-19
毕业设计要做一个提示框：当鼠标放在某个链接上时，下边显示有提示功能的窗体。如下： 具体代码实现如下：  CSS： 复制代码代码如下: .rhsyyhqDIV{ position:absolute; top:555px; left:200px; font-size: 9pt; display:block; height:335px; width:405px; background-color:transparent; display: none; } s{ position:absolute; top:-20px; left:50px; display:block; height:0; wid
鼠标移到DIV上特效
10-18
鼠标移到DIV上特效,鼠标移到DIV上特效，鼠标移到DIV上特效
鼠标经过显示隐藏div
06-24
鼠标经过显示隐藏层js，隐藏层可加css样式，可随意控制大小，js有详细注释
jQuery实现Div动态列宽调整
本文档主要介绍了如何在HTML页面上实现div元素的动态列宽调整功能，通过结合jQuery库来实现鼠标拖动事件来改变div的宽度。以下是详细的步骤和技术要点： 1. **文档结构与引用**: - 使用`<!DOCTYPE html>`声明文档...
css：移动到一个div上出现另一个div
qq_37193887的博客
09-04 6759
      完成的功能主要是在，orgchart组织结构图上实现，将鼠标移动到node节点上，显示div（里面可以显示详细信息） 我是通过CSS实现的 ，如下 .orgchart .second-menu-icon { height: 217px; width: 200px; transition: opacity 0.5s; display: none; right: -20...
鼠标移入div显示查看更多demo
到得还来别无事，庐山烟雨浙江潮。
12-19 1007
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
vue3中如何实现鼠标放到一个div上显示title
05-17
在 Vue3 中，可以通过 `v-bind` 指令来绑定 `title` 属性并显示。具体实现步骤如下： 1. 在组件中添加一个 `div` 元素，并绑定 `title` 属性和一个自定义属性 `myTitle`： ```html <template> <div v-bind:title="myTitle"></div> </template> ``` 2. 在 `data` 中声明 `myTitle` 属性，并设置默认值： ```js <script> export default { data() { return { myTitle: "这是默认的title" } } } </script> ``` 3. 添加 `mouseover` 和 `mouseout` 事件监听器来修改 `myTitle` 的值： ```js <script> export default { data() { return { myTitle: "这是默认的title" } }, methods: { onMouseOver() { this.myTitle = "鼠标放在div上的title"; }, onMouseOut() { this.myTitle = "这是默认的title"; } } } </script> <template> <div v-bind:title="myTitle" @mouseover="onMouseOver" @mouseout="onMouseOut"></div> </template> ``` 这样，当鼠标移动到 `div` 元素上时，`myTitle` 属性的值将会被修改，从而实现了鼠标放到一个 `div` 上显示 `title` 的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值