首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

需要将DIV-2粘贴在DIV-1的底部,然后在悬停时将其隐藏在DIV-1下

要将DIV-2粘贴在DIV-1的底部,并在悬停时将其隐藏在DIV-1下,可以使用CSS和JavaScript来实现。

首先,需要确保DIV-1和DIV-2的位置是相对定位(position: relative),这样才能在DIV-1内部进行定位。

接下来,可以使用CSS的z-index属性来控制DIV-2在DIV-1下方显示。将DIV-2的z-index设置为一个较小的值,例如-1,这样DIV-2就会被DIV-1覆盖。

然后,使用JavaScript来监听DIV-1的悬停事件。当鼠标悬停在DIV-1上时,将DIV-2的display属性设置为none,即隐藏DIV-2。当鼠标离开DIV-1时,将DIV-2的display属性设置为block,即显示DIV-2。

以下是一个示例代码:

HTML代码:

代码语言:txt
复制
<div id="div1">
  <!-- DIV-1的内容 -->
</div>
<div id="div2">
  <!-- DIV-2的内容 -->
</div>

CSS代码:

代码语言:txt
复制
#div1 {
  position: relative;
  z-index: 1;
}

#div2 {
  position: relative;
  z-index: -1;
}

JavaScript代码:

代码语言:txt
复制
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

div1.onmouseover = function() {
  div2.style.display = "none";
}

div1.onmouseout = function() {
  div2.style.display = "block";
}

这样,当鼠标悬停在DIV-1上时,DIV-2会被隐藏在DIV-1下方;当鼠标离开DIV-1时,DIV-2会重新显示在DIV-1的底部。

在腾讯云的产品中,可以使用云服务器(CVM)来进行云计算和服务器运维,使用云数据库(CDB)来进行数据库存储,使用云存储(COS)来进行多媒体处理和存储,使用人工智能(AI)和物联网(IoT)相关产品来进行相关开发和应用。具体产品介绍和链接地址可以参考腾讯云官方网站。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

漂亮loading加载动画,这些方法可知道?

CSS3 实现效果 首先我们来看看需要实现效果。 效果图 然后我们一个个来看都是怎么实现吧。 loadingA loadingA效果就如音乐播放动态条一般,不停连续执行。...基本div元素 定义动画 定义动画主要是改变div高度,完成50%时候达到最高值,完成100%恢复到原来高度。...loadingG中是通过设置一个纵向div-1div-1内增加一个div-2div-2就是转动圆点,div-2通过绝对定位计算出实际位置,当div-1大小变化时,div-2也应该重新计算位置...div-2CSS代码如下所示。 loadingG基本样式 loadingH中,div-1内有四个div,分别表示转动四个圆点,也是通过绝对定位计算偏移位置。...结束语 今天这篇文章主要是教大家如何使用CSS3动画特性去实现loading效果,完全可以不用借助于第三方库,大家也动动手自己实现一吧。全部代码的话微信公众号群文件获取!

2.1K60

CSS定位之position详解

position属性 在前端中,position是很常见属性。通过这个属性可以调整dom元素浏览器中显示位置。 它有几个常用属性: static 默认值。...通常是覆盖absolute或者relative样式使用。 relative 相对定位。相对于原本自己位置,其他元素样式不会发生改变。 position 绝对定位。...相对于最近一个应用absolute或者relative父元素,然后相对这个元素进行定位。 fixed 相对浏览器定位。 inherit 继承父样式。...其中relative、position、fixed比较难于理解,下面就介绍这三个: relative 看意思是相对定位,那么是相对什么进行定位呢?其实是相对它原本位置。比如学生站队,教练喊小明。...:red;padding:10px;">1 2 <div class="div

78860
  • NeurIPS 2019 | 既能理解又能生成自然语言,微软提出统一预训练新模型UniLM

    为了控制对所要预测词 token 上下文读取,作者使用了不同自注意掩码。换句话说,作者使用了掩码来控制计算基于上下文表征 token 应该关注上下文量。...,然后使用一个 L 层 Transformer ? 将其编码成不同抽象层面 ? 上上下文表征。每个 Transformer 模块中,使用了多个自注意头来聚合前一层输出向量。...以文本分类为例,作者使用 [SOS] 编码向量作为输入编码,表示为 ? ,然后将其输入一个随机初始化 softmax 分类器(即特定于任务输出层),其中类别概率计算方式为 ?...Div-1 and Div-2 indicate diversity of unigrams and bigrams, respectively. ? 表 10:响应生成结果。...Div-1Div-2 分别表示 unigram 和 bigram 多样性。 GLUE 基准 作者还在 GLUE 基准上对 UniLM 进行了评估。

    82320

    爬虫必备Beautiful Soup包使用详解

    单个节点结构层次非常清晰情况,使用这种方式提取节点信息速度是非常快。...关联获取 获取节点内容,不一定都能做到一步获取指定节点中内容,有时还需要先确认某一个节点,然后以该节点为中心获取对应子节点、孙节点、父节点以及兄弟节点。...,可以使用descendants属性来实现,该属性会返回一个generator对象,获取该对象中所有内容,同样可以直接将其转换为list 类型或者通过for循环遍历方式进行获取。...获取节点内容,同样可以直接将其转换为list类型或者通过for循环遍历方式进行获取。...,填写attrs参数,默认情况需要填写字典类型参数值,但也可以通过赋值方式填写参数。

    2.6K10

    前端构建:Less入了个门

    -1 { .mixin(100px); } div-2 { /* ... */ .mixin(100%); } // 最终输出: div-1 { width: 100px; padding...七、通过Lessc将Less引入开发环境                     到这里我想大家已经对Less有一定程度了解,并希望将其加入你开发工具包中。...2. sourcemap相关      由于浏览器直接查看和操作是CSS样式规则,而我们开发使用Less代码,这会导致难以找到CSS样式规则所对应Less代码从而增大调试难度。...:over     然后CMD中输入 build bin  、 build debug  或  build dist  即可构建工程了!...首先我们要将npmpackage.json添加到工程中,然后安装grunt及其插件(grunt-contrib-less,less-plugin-clean-css,grunt-contrib-clean

    1.7K70

    前端构建:Less入了个门

    -1 { .mixin(100px); } div-2 { /* ... */ .mixin(100%); } // 最终输出: div-1 { width: 100px; padding...七、通过Lessc将Less引入开发环境                     到这里我想大家已经对Less有一定程度了解,并希望将其加入你开发工具包中。...2. sourcemap相关      由于浏览器直接查看和操作是CSS样式规则,而我们开发使用Less代码,这会导致难以找到CSS样式规则所对应Less代码从而增大调试难度。...:over     然后CMD中输入 build bin  、 build debug  或  build dist  即可构建工程了!...首先我们要将npmpackage.json添加到工程中,然后安装grunt及其插件(grunt-contrib-less,less-plugin-clean-css,grunt-contrib-clean

    1.4K70

    CSS粘性定位 - 它真正工作原理!

    当它正常工作,元素会""一定位置,但在滚动其他部分,它又会停止""住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题根本原因,所以决定深入研究sticky定位。...Stick 探索 尝试使用 sticky 定位过程中,我很快发现,当一个具有sticky定位样式元素被包裹起来,并且它是包裹元素内唯一元素,这个被定义为sticky定位元素并不会""住。...让我来解释一: Relative 定位(或Static定位)- 粘性定位元素类似于相对定位和静态定位,因为它保持DOM中自然间隙(保持流中)。...Absolute 定位 - 粘附区域末尾,元素停止并堆叠在另一个元素顶部,就像绝对定位元素 position: relative 容器内行为一样。 贴在底部?...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置,并且向下滚动始终会出现粘在底部。当我们到达粘性容器末尾,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部元素。

    28820

    RecyclerView 居然还能实现吸底效果

    在用ItemDecoration实现分组悬停过程中,又可以细分为两种方法。 一种是通过getItemOffsets方法预留空间,然后onDrawOver中对应区域绘制悬停头部。...然后我们就可以onDrawOver获取第一个可见Item头部View,接着复用这个头部View,将其绘制顶部即可。 接下来对这两种方式进行介绍。...然后我们就可以onDrawOver获取第一个可见Item头部View,接着复用这个头部View,将其绘制顶部即可。 示意图如下: ?...当某个Item底部与RecyclerView底部重叠,lastView跟lastVisibleView就是同一个了,具体如下图: ?...默认情况,悬浮View会绘制lastVisibleView内部,跟lastVisibleView底部对齐。

    3.1K20

    《CSS 世界》读书笔记-流与宽高

    因为阅读本书 CSS “流” 相关内容让我有了一种恍然大悟感觉,所以才有了此篇读书笔记。...以 float 元素为例子: .div-1 { float: left; padding: 10px; border: 2px solid black; } .div-2 {  width:...下面有一个例子: 尺寸超出原因是,标准盒子模型,元素宽度 = 内容宽度 + 内边距 + 边框宽度。...之前讨论块级元素和内联元素,当我们在谈论它们是一行还是换行显示,实际上是谈论外在盒子。而内在盒子实际是负责了元素宽高和内容。...总结 在这篇笔记中,主要总结了流与宽高之间是如何相互影响,同时还探索了部分盒模型问题。希望能给大家平常开发,带来一定启发。 紧追技术前沿,深挖专业领域 扫码关注我们吧!

    1.3K20

    用Qt写软件系列四:定制个性化系统托盘菜单

    导读     一款流行软件,往往会在功能渐趋完善时候,通过改善交互界面来提高用户体验。毕竟,就算再牛逼产品,躲藏在糟糕用户界面之后总会让用户心生不满。...界面设计综合考虑审美学、心理学、设计学等多因素,是一份精细活。这篇博文仍然以Qt使用为主旨,探讨一Qt中如何进行系统托盘个性化定制。...当过滤到绘制事件并且绘制组件是顶部菜单项和底部菜单项,我们改变绘制方式。...按钮背景设置为透明,这样不会受到默认主题颜色干扰 } QPushButton#TrayButton:hover { background: rgb(233, 237, 252); # 鼠标悬停...,按钮背景色设为淡色 color: rgb(42, 120, 192); # 鼠标悬停,文本颜色不变 }   基本上,使用上面的样式设置就可完成基本样式设置。

    2.8K100

    来自用户体验大师100个UX设计建议——上篇

    如果用户需要用小拇指去点击手机网站或应用程序,这说明界面上交互目标太小。 24. 当用户拿着平板电脑,大拇指最容易接触到地方是屏幕两侧和底部。 25....设计移动布局,考虑用户是否会单手或两只手使用设备情况。 5.png 六、关于导航设计 28. 在网站上设置一个明显路径供用户访问导航菜单。 29....如果你网站层次结构超过3-4级,是时候考虑重新设计了。 30. 考虑使用粘性菜单导航(跟随浏览器滚动导航),特别是较长网页中或需要快速访问。 31....使用面包屑导航,让用户知道他们在网站上所处位置。 35. 移动端导航设计:显示最常用选项,并将其他选项隐藏在汉堡包菜单。 36....菜单下拉列表应该是垂直,而不是水平悬停,因为水平滚动要困难得多。 39. Megamenus菜单设计应该比网页更窄,用户才能很轻松地“点击”菜单。 40.

    1.7K30

    腾讯云 API 最佳实践:保护你密钥

    密钥有效期是永久,这也是为什么你需要将其妥善保管原因之一。一些高度敏感业务中,你甚至需要使用永久密钥去生成临时密钥去发起 API 请求。临时密钥是有有效期,过期自动就失效了。...密钥有各种可能被泄漏,但是通常发生在不当代码共享场景里。许多开发者直接把密钥写在代码中,当代码遇到问题,又喜欢把代码贴在网上寻求帮助,或者腾讯云工单系统里提单咨询直接贴上源码。...答案是: 把你密钥隐藏在环境变量中 把你密钥隐藏在环境变量中 把你密钥隐藏在环境变量中 我们推荐开发者使用腾讯云 SDK 调用 API 。...如果你觉得每次登录 Shell 环境都要导出很麻烦,可以将其配置 ~/.bashrc 文件中,下次登录 Shell 环境,就会自动导出这两个环境变量了。...这是另一种通行做法,特别是当你写一个正式服务。不过你代码就要写死配置文件路径了, Windows 和 Mac 环境,这些路径很有可能会不同。

    15.5K120

    使用Stegseek破解经过Steghide数据

    该工具作为原始Steghide项目的一个分支而构建,它速度比其他破解器快上千倍。该工具帮助,广大研究人员可以轻松从使用了Steghide写&加密文件中提取出隐藏数据。...值得一提是,仅两秒钟,该工具就可以跑完rockyou.txt字典。而众所周知,rockyou.txt是一个包含了超过1400万个密码强大字典文件。...关于Steghide Steghide是一款开源写术软件,它可以让你在一张图片或者音频文件中隐藏你秘密信息,而且你不会注意到图片或音频文件发生了任何改变。...而且,你秘密文件已经隐藏在了原始图片或音频文件之中了。这是一个命令行软件,因此你需要通过命令来实现将秘密文件嵌入至图片或音频文件之中。...除此之外,你还需要使用其他命令来提取你隐藏在图片或音频中秘密文件。 工具安装 广大研究人员可以按照下列方式完成Stegseek安装,或者直接在一个Docker容器中运行Stegseek。

    3.6K10

    SAO UI Plan -- SAO Utils WEB 2.0

    最后兜兜转转,魔改博客看到了Volantis右键菜单。学习了一右键菜单魔改原理。决定自己来从零开始做一个SAO风格右键菜单。 因为这个项目,魔怔了大概半个月,好在那半个月单位工作基本划水。...所以这次@卓越科技建议添加了ctrl+右键打开原生右键菜单功能。然后考虑到菜单界面对手机不友好,干脆对手机不生效了。...然后追番考古时发现左侧菜单还有一个属性面板界面。OK,话不多说。继续加。 总的来说,熟练掌握相对定位关系以后,适配起来还是很容易。...不过静态css是不支持这种玩法啦,好在到时候实装还有pug和stylus可以添加计算变量动态调整。小case啦。 然后左半边菜单就搞定啦,悬停显示效果和动画里那是一模一样啊。开心!...内附本帖链接,可能的话,希望可以开着帮我做宣传 3 hoverShow true , false true为开启悬停显示,false为关闭悬停显示。默认开启。控制属性栏和三级菜单悬停

    2.1K20

    混合高斯模型和EM算法

    类条件概率是就是已知一个条件,结果发生概率。...先验概率:事情还没有发生,根据以往经验和分析得到概率,事情发生之前,得到事情(结果)发生概率。...比如,一次抛硬币实验,我们认为正面朝上概率是0.5,这就是一种先验概率,抛硬币前,我们只有常识。...,因为我们风险比较低,用数学式子表达一: 计算后验概率是我们需要考虑,这里有两个模型可以考虑,一个是判别模型,就是直接构造概率分布: ,一个是生成模型,下面进行叙述: 收到某个消息之后,接收端所了解到该消息发送概率称为后验概率...可以这样理解生成流程:有 个高斯分布,赋予每一个分布一个权重,每当生成一个数据,就按权重比例随机选择一个分布,然后按照该分布生成数据,就是变量,所以对于样本在给定参数 条件下边际概率

    49930

    干货 | 黑客带你还原韩剧《幽灵》中出现写术

    小伙伴们还记得2012年出品黑客剧《幽灵》吗?该剧以网络犯罪和网络刑警为题材,讲述了虚拟搜查队揭开一个个不为人知藏在网络世界尖端技术中秘密,所经历各种骇人听闻事件和奇遇。...这是该软件选取载体文件显示,可以看出只支持图像文件作为载体进行写,难怪剧组为了剧情完整性,不惜使用改后缀名方式来走捷径。...这样表示一个象素颜色,只需要指出该颜色是第几行,即该颜色表中索引值。例如,如果表第5行为255,0,0(红色),那么当某个象素为红色,只需要标明5即可。 这样可以节省多少空间呢?...随机序列生成函数 可以看出生成随机数列有三个输入参数,其中图片长度可以根据图片文件信息头进行获取,而其他两个参数可以作为密钥由用户保存,信息提取,必须在知道key和size情况才可以正确地提取完整信息...然后将加密后密文进行写。

    1.9K81

    这 7 个大部分人不知自带功能,能让 Chrome 变得很好用

    而新开发功能则被隐藏在 Chrome flags —— 作为新功能试验田,通过开启特定 flags 来稳定版中尝鲜新功能,即可以尝鲜也避免了可能不稳定风险,下面我们挑选了一些稳定性尚可且比较实用...开启方法和移动端一样, Chrome flags 上搜索「Parallel downloading」来开启 Chrome 并行下载功能,你可以尝试大个文件以及多个文件,你会发现速度会提高那么一些...你还可以手动创建新组或者将当前标签页加入组中,通过拖拽标签页将其放在「组标记点」后面就可以添加到当前组,而移除则只需要将标签页从组中拖拽出即可,而为了标记更清楚,点击组标记点还可以更改颜色,也可以为组进行命名让其更明显...奇怪是这个功能在桌面端 Chrome 中依旧被隐藏在 flag 中,而开启方式是 Chrome Flags 中找到「Enable Reader Mode 」来开启这个功能,打开之后重启浏览器,地址栏最右侧会出现一个新图标...开启之后当鼠标悬停在标签页将可以看到网页内容预览窗口了,不用切换标签页就可以看到内容可以说更为方便一些,不过这项功能对系统性能有一定要求,如果想要更好浏览体验可以酌情开启。

    68020

    隐秘印记:暗水印实践技术分享

    1.1.1隐藏在白纸中符号 比如下图是中科院上海某化学所写耐火纸,可以看到一张看似普通白纸之中,却隐藏了一个图案和字母。这个图案和字母就属于暗水印。它可以用来隐秘传输信息、做防伪标识等。...1.1.2隐藏在图片中二维码 下面这个例子可能就比较少见了。它是2020ByteCTF(字节跳动网络安全攻防大赛) Misc 一道写题目。...首先将秘密信息S输入到P中,得到秘密信息特征图,然后将特征图与载体图像C进行拼接后输入到H中,最终生成嵌入信息后图像C’。解码,利用R恢复出C’中嵌入信息S’。...若秘密信息为二进制字符串,通常将其重复多次以达到和C相同大小,或将其reshape成C形状后再upscale到C大小,然后将其与C拼接输入到H中完成信息嵌入。 ?...社会背景,非常期待暗水印版权保护、数据防护等方面发挥越来越重要价值。 我们持续研究将算法版权保护、敏感资料泄露溯源等场景落地。

    12.6K81

    网站分析平台:是选择百度统计,还是 Google Analytics

    一、 如何使用和配置 这两个平台使用方法大致相同,主要都是需要将平台所给一段代码复制到网站代码之中,然后等待一段时间。两个平台都有很清晰操作步骤。...1.2 百度统计 点击最上面的“管理”就可以编辑网站信息,然后点击“获取代码”,按照提示将代码粘贴在正确位置。...2.1 Google Analytics 设置中第三列菜单中点击Filters,然后点击Add Filter就会出现如下图界面,Filter Name随意写,下面三个选项如图中选择,然后找到自己...2.2 百度统计 “管理”界面左侧选择“统计规则”然后再选择“排除规则设置”,这里会直接提示当前登录IP,你直接复制就行。...有时候这个 IP 并不是你浏览自己界面 IP,这时候你得第一次记录到你浏览找到记录 IP 粘贴在这里(“报告”界面中“实时访客”可以找到你实际使用IP。

    1.7K20

    让你兴奋不已13个CSS技巧🤯

    /home 1.使用边框绘制一个三角形 某些情况,例如在工具提示中添加箭头指针,如果你只需要简单三角形,那么加载图片可能会过度。...有时,你可能会设置一个 z-index 属性让子元素层级较低,结果却发现它隐藏在其父元素背景之后。为了防止这种情况,你可以父元素上创建一个新堆叠上下文,防止子元素隐藏在其后面。...transition: left 500ms ease-out; z-index: -1; } button.join-now:hover::before { left: 0; } 上述代码鼠标悬停交换了...您只需让浏览器知道,您网站可以系统深色/浅色模式正确显示。...这种简写方式与margin 工作方式相同。 10.提供优化过图片 请尝试浏览器开发者工具中将网络速度调整到较慢,然后访问一个由高清图片组成网站,比如 unsplash。

    31950
    领券