首页
学习
活动
专区
工具
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-1,在该div-1内增加一个div-2,div-2就是转动的圆点,div-2通过绝对定位计算出实际位置,当div-1大小变化时,div-2也应该重新计算位置...div-2的CSS代码如下所示。 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 div-2" style="background-color:blue;padding:10px;">2 <div class="div

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

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

    83420

    爬虫必备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  即可构建工程了!...首先我们要将npm的package.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  即可构建工程了!...首先我们要将npm的package.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 容器内的行为一样。 贴在底部?...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置,并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。

    30620

    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.9K100

    来自用户体验大师的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.6K120

    使用Stegseek破解经过Steghide隐写的数据

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

    3.7K10

    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,这就是一种先验概率,在抛硬币前,我们只有常识。...,因为我们的风险比较低,用数学式子表达一下: 计算后验概率是我们需要考虑的,这里有两个模型需可以考虑,一个是判别模型,就是直接构造概率分布: ,一个是生成模型,下面进行叙述: 在收到某个消息之后,接收端所了解到的该消息发送的概率称为后验概率...可以这样理解生成流程:有 个高斯分布,赋予每一个分布一个权重,每当生成一个数据时,就按权重的比例随机选择一个分布,然后按照该分布生成数据,就是隐变量,所以对于样本在给定参数 的条件下边际概率

    50530

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

    小伙伴们还记得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 」来开启这个功能,打开之后重启浏览器,在地址栏的最右侧会出现一个新的图标...开启之后当鼠标悬停在标签页时将可以看到网页内容的预览窗口了,不用切换标签页就可以看到内容可以说更为方便一些,不过这项功能对系统性能有一定的要求,如果想要更好的浏览体验可以酌情开启。

    70020

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

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

    1.7K20

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

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

    13K81

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

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

    33150
    领券