鼠标滑过某div出现另一被隐藏div的常见写法:display属性

最新推荐文章于 2023-05-08 16:04:56 发布
最新推荐文章于 2023-05-08 16:04:56 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： 前端 文章标签： css js display
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40927742/article/details/96332466
版权

display属性：
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。（较适用于ab不同时显示）
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。（适用于ab同时显示）
inline-block 行内块元素。（CSS2.1 新增的值）

1、利用js函数，实现滑在b上，a由隐藏变显示

<!DOCTYPE html>
<div class='a' id='a' style="display:none">a is hidden</div><br/>
<div class='b' id='b'  onmouseover="mover();" onmouseout="mout();">b is show</div>

<script type="text/javascript">
function mover() {
	document.getElementById('a').style.display='inline'; 
}
function mout() {
	document.getElementById('a').style.display='none'; 
}
</script>

</html>

页面效果：
鼠标滑过前：
b is show
滑过时：
a is hidden
b is show

2、利用css样式，实现滑在b（实际是c）上，b变成a

<!DOCTYPE html>

<style type="text/css">
.a{display:none;}
.c:hover .a{display:block;}
.c:hover .b{display:none;}
</style>

<li class="c">
<div class='a' >a is hidden</div>
<div class='b'>b is show</div>
</li>
</html>

页面效果：
鼠标滑过前：b is show
滑过时：a is hidden

qq_40927742
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
区别div和span、relative和absolute、display和visibility
12-09
一、div和span的区别　div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。　span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，...
div css教程TOP排行榜或新闻列表最标准div css样式表代码写法
11-04
- **网格布局**：利用 `display: grid` 或 `display: flex` 可以创建灵活的网格系统，适应不同屏幕尺寸。例如，可以设置 `grid-template-columns` 来定义列数，或者用 `flex-wrap` 控制元素是否换行。 4. **样式...
鼠标滑过div显示与隐藏
weixin_34130389的博客
07-16 501
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> </head><body> <form id="form1" runat="server"> 问题:当绿色的DIV显示出来后,鼠标移入DIV无事,再移到aaaa正上方的一小部分局域(就aaaa四...
css中将鼠标放到一个div上显示出另一个隐藏的div
sunshine_hl的博客
10-20 2万+
css中将鼠标放到一个div上显示出另一个隐藏的div
js鼠标移动到a标签上出现div，从div移出去就消失
weixin_42680298的博客
09-25 2333
<script> window.onload = function(){ let header = document.getElementsByClassName('hmenuli') let content = document.getElementsByClassName("headerfall") for(let i=0;i<header.length;i++...
css实现 ： 鼠标移动上去显示div,移开隐藏div
热门推荐
dkvirus
07-11 6万+
一、实现效果：     注：此时鼠标还没移进红色框，红色框内的内容隐藏起来了    注：此时鼠标移到红色框区域内了，内部隐藏的东西显示出来了 二、css控制具体代码： 测试对象转数组 .FontStyle{float:left;} .wrap{float:left;} .wrap{border:1px solid white;width:250px;height
元素的显示与隐藏，案例：鼠标经过显示遮罩
m0_69034993的博客
07-09 934
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生声明。除了转换为块元素之外，同时还有显示元素的意思。visibility属性用于指定一个元素应可见还是隐藏。visibility隐藏元素后，继续占有原来的位置。display隐藏元素后，不再占有原来的位置。display属性用于设置一个元素如何显示。3.overflow 溢出显示隐藏。
关于鼠标移入让另一个div显示隐藏
weixin_53742730的博客
07-14 551
鼠标移入dt让dd显示，因为dt和dd是属于同级关系，所以要加‘+’，但是同时有个问题，移入dt的时候dd是显示了，但是鼠标移不到dd的里面的子元素上，dd就又隐藏了。所以想要鼠标移入dd的子元素上就要让dt和dd呈现父子级的关系。 正确的代码： ...
hover一个div时显示另一个div不生效/抖动/闪屏问题
Yoyo_Yan的博客
12-05 1223
hover一个div时显示另一个div不生效/抖动/闪屏问题 参考大神博客，这里做个记录 https://www.cnblogs.com/don-yang/p/9468958.html 两个div之间的关系存在三种情况： 父子关系 兄弟关系 兄弟的子孙关系 实现办法 父子关系 /* 情景一：两个是兄弟元素 */ .box:hover+.change { colo...
鼠标经过显示隐藏盒子
qq_41988113的博客
07-18 1288
visibilityhidden/visible与displaynone/block的区别visibility还会留下它的位置，display不会，所以用display时可能有其他东西移动位置的情况。（所以这里我们选择用visibility）在父盒子中有一个子盒子，默认是不显示出来，当鼠标经过的时候显示出来。（1）使用定位的写法在子盒子的外部在包裹一个div盒子。...
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
11-17
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
DIV+CSS 浏览器兼容性小结
12-02
所有浏览器 通用height: 100px; IE6 专用_height: 100px; ...important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.) 代码:<style>#wrapper {width: 100px!important; /* IE
div水平垂直居中的完美解决方案
09-25
在网页设计中，让元素居中对齐是一项常见的需求，特别是在布局和排版中。本文主要探讨的是如何使用CSS来实现`div`元素的水平和垂直居中。我们将通过两种不同的方法来详细讲解这一主题。 首先，我们来看一种简单的...
用CSS和Div美化select样式的简单方法
09-25
本文将介绍如何使用CSS和Div来优化SELECT样式，并提供兼容性写法，帮助开发者创建更美观且一致的界面。 首先，我们可以看到一个简单的例子，它使用Div包裹SELECT元素，通过CSS来调整样式。代码如下： ```css ....
vue 悬停显示另一个div_鼠标滑过div让另外一个div从隐藏变为显示
weixin_39989939的博客
12-18 1339
展开全部1、给鼠标经过的DIV添加一个类 ，类名为62616964757a686964616fe4b893e5b19e31333431366364submeau；如下图：2、给显示或者隐藏的DIV，添加一个ID，ID名为:id="oa_submeau"，如下图：3、将以下的JQUERY代码放在整个网页的最底部，用于控制鼠标经过显示DIV，离开隐藏DIV。$("#oa_submeau").hide(...
鼠标滑过div出现另一个div并且点击会固定
weixin_45646663的博客
05-08 677
【代码】鼠标滑过div出现另一个div并且点击会固定。
css：移动到一个div上出现另一个div
qq_37193887的博客
09-04 6624
      完成的功能主要是在，orgchart组织结构图上实现，将鼠标移动到node节点上，显示div（里面可以显示详细信息） 我是通过CSS实现的 ，如下 .orgchart .second-menu-icon { height: 217px; width: 200px; transition: opacity 0.5s; display: none; right: -20...
div用css显示隐藏的效果
m0_49714202的博客
05-28 1145
<div> <a href="#">一级导航</a> <p> <a href="#">二级导航</a> <a href="#">二级导航</a> <a href="#">二级导航</a> </p> </div> 这样的结构写法在我们的页面中一开始是所有的导航都是显示的 我们想要实现一开始只显示
鼠标移动到元素 将隐藏的div显示
weixin_45553596的博客
11-24 481
鼠标移动到元素 将隐藏的div显示
一个高度固定的div里面有好几个p标签 当p标签过多超出div的高度时,让超出的元素隐藏,同时让div最底部显示省略号 ,如果没有超出,就不显示省略号 请你给出五种写法
最新发布
05-09
1. 使用CSS3中的text-overflow属性 ```css div { height: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` 2. 使用JavaScript计算高度并设置样式 ```html <div id="myDiv"> <p>...</p> <p>...</p> <p>...</p> ... </div> ``` ```css #myDiv { height: 100px; overflow: hidden; } ``` ```javascript const div = document.getElementById('myDiv'); const p = div.getElementsByTagName('p'); let totalHeight = 0; for (let i = 0; i < p.length; i++) { totalHeight += p[i].offsetHeight; } if (totalHeight > div.offsetHeight) { div.style.height = div.offsetHeight + 'px'; div.style.overflow = 'hidden'; div.style.textOverflow = 'ellipsis'; div.style.whiteSpace = 'nowrap'; p[p.length - 1].style.display = 'none'; const span = document.createElement('span'); span.innerHTML = '...'; div.appendChild(span); } ``` 3. 使用jQuery计算高度并设置样式 ```html <div id="myDiv"> <p>...</p> <p>...</p> <p>...</p> ... </div> ``` ```css #myDiv { height: 100px; overflow: hidden; } ``` ```javascript const div = $('#myDiv'); const p = div.find('p'); let totalHeight = 0; p.each(function() { totalHeight += $(this).outerHeight(true); }); if (totalHeight > div.height()) { div.css({ height: div.height(), overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }); p.last().hide(); const span = $('<span>...</span>'); div.append(span); } ``` 4. 使用Vue.js计算高度并设置样式 ```vue <template> <div ref="myDiv"> <p>...</p> <p>...</p> <p>...</p> ... </div> </template> <script> export default { mounted() { const div = this.$refs.myDiv; const p = div.getElementsByTagName('p'); let totalHeight = 0; for (let i = 0; i < p.length; i++) { totalHeight += p[i].offsetHeight; } if (totalHeight > div.offsetHeight) { div.style.height = div.offsetHeight + 'px'; div.style.overflow = 'hidden'; div.style.textOverflow = 'ellipsis'; div.style.whiteSpace = 'nowrap'; p[p.length - 1].style.display = 'none'; const span = document.createElement('span'); span.innerHTML = '...'; div.appendChild(span); } } } </script> ``` 5. 使用React计算高度并设置样式 ```jsx import React, { useEffect, useRef } from 'react'; export default function MyComponent() { const divRef = useRef(null); useEffect(() => { const div = divRef.current; const p = div.getElementsByTagName('p'); let totalHeight = 0; for (let i = 0; i < p.length; i++) { totalHeight += p[i].offsetHeight; } if (totalHeight > div.offsetHeight) { div.style.height = div.offsetHeight + 'px'; div.style.overflow = 'hidden'; div.style.textOverflow = 'ellipsis'; div.style.whiteSpace = 'nowrap'; p[p.length - 1].style.display = 'none'; const span = document.createElement('span'); span.innerHTML = '...'; div.appendChild(span); } }, []); return ( <div ref={divRef}> <p>...</p> <p>...</p> <p>...</p> ... </div> ); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值