如何使用 css 隐藏元素,同时仍将其保留在页面上?

2023-11-27

我试图隐藏页面上的一个元素,但我仍然希望它存在。我想要一个仍然可以单击的按钮,但我希​​望它不可见。


隐藏元素并保持页面位置的方法有3种。您可以获得有关之间的更多信息正常流量和css样式(即:opcity、visibility)属性关系。

  1. 能见度
  2. opcity
  3. 透明的

$('div').click(function (){
  alert(this.innerHTML)
})
div{
  border: 1px solid #000;
}
.one{
  visibility:hidden;
}
.two{
  opacity: 0;
}
.three{
  background: transparent;
  color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  1
  <div class="one">visibility</div>
  2
  <div class="two">opticy</div>
  3
  <div class="three">transparent</div>
  4
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 css 隐藏元素,同时仍将其保留在页面上? 的相关文章

  • 如何让 Twitter Bootstraps 移动导航栏覆盖页面上的内容而不是将其向下推?

    我正在使用 Twitter Bootstrap 并且想修改移动导航栏 以便在展开时下拉菜单覆盖页面上的内容 而不是将其向下推 我知道我可能需要制作包含 div 绝对定位 增加它的 z index 并定位外部 div 相对而言 但我似乎无法让
  • 更新 Parse.com 中的一行

    我所拥有的是 当单击编辑按钮时 两个输入字段中的值将创建一个新行 并删除旧行 下面是我使用的代码 但我想要的是更新原始行而不是删除原始行 实例 http jsbin com uyonek 2使用下面的代码是如何工作的 editBtn onc
  • 可编辑的 Div 插入位置

    我有一个可编辑的 div 我正在使用一个按钮将图像插入到该 div 中 现在 我只是在做 document getElementById elementid innerHTML 为了将图像添加到 div 的末尾 我想输入插入符号所在的图像
  • 如何使用 Angular 2 实现拖放(v2.0.0-beta.15)

    我想以角度实现一个简单的拖放列表 例如我可以更改其顺序的杂货列表 iv 在使用之前实现它https github com akserg ng2 dnd https github com akserg ng2 dnd但我的问题是我使用角度2
  • 文本区域值高度[重复]

    这个问题在这里已经有答案了 我有一个 textarea 其 css 高度设置为 85px 用户可能会在该文本区域内键入内容行 我想知道文本 值的高度 而不是文本区域本身 有没有办法检查内部文本的高度 包括换行符 我会将文本区域的内容复制到另
  • Phonegap(应用程序错误...发生网络错误)

    我已经使用phonegap 创建了一个版本 在index html 文件中 我编写了一个简单的iframe 用于加载网站 当我从phonegap获取本地url时它就起作用了 但如果我将整个构建作为 zip 文件上传到 PhoneGap 中
  • IE8/9 - CSS 文件的最大字节数

    我目前正在开发的应用程序有过多的 CSS 样式 我们似乎已经达到了 IE8 9 以及它可以加载的 CSS 数量的某种限制 在某些时候 它会停止解释 CSS 从而破坏某些页面上的样式 我们正在使用 Combres 来压缩 缩小导致 CSS 文
  • Chrome 扩展程序未加载 EventListener

    我一直在创建一个 chrome 扩展 它将我的新标签页分成 2 个框架 这样我就可以尝试加载 2 个不同的 URL 现在我开始很简单 但我无法让它们按预期加载 这是代码 背景 html
  • 使用 jQuery 在元素末尾添加“更多”html?

    我一开始有一个空的 div div div 我知道如何使用 jQuery 第一次将 html 添加到我的空 div 中 mydiv html my html 但我的问题是我不知道如何在非空 div 末尾推送更多 html div my ht
  • 从 firebase 数据库获取最高分值

    在我的网站上有一些我从 firebase 获得的电影 电影的分数在0到100之间 我已经在我的网站上找到了所有电影 我还想按降序显示它们 例如评分最高的 5 部电影 我怎样才能实现这一点 感谢您的回答 const app initializ
  • 未使用 Font Family Open Sans

    我在用谷歌的 Open Sans 字体 http www google com fonts UsePlace use Collection Open Sans在我的应用程序中 我已经按照指示定义了样式表 然后我在主体选择器上使用它 body
  • 在 HTML TextArea 中设置(或读取)光标/插入符的值

    我正在尝试 但失败了 在 HTML 文本区域中实现拖放机制 使用 jQuery 或 Scriptaculous 我们都使用 拖放机制相对容易 因此我愿意接受使用这两者之一的答案 问题是 我似乎找不到读取或设置插入点的方法 我最终想要做的是确
  • 使用过渡添加子项时 div 的平滑增长

    尽管使用了以下代码 但其行为并不符合我的预期transition所以可能有些事情我不明白 理想情况下 单击该按钮会将一个子项添加到id2div 并制作id1分区增长smoothly因此 function id1 button click g
  • 垂直对齐材质图标

    我正在尝试在导航菜单中垂直对齐 下拉箭头 我尝试过各种方法 例如vertical align middle display inline block 之类的东西 但这根本没有帮助 http img02 imgland net jfCmDoW
  • 占位符不适用于 Internet Explorer

    我的应用程序出现了小问题 Internet Explorer 11 上不存在占位符 我尝试了下面的 CSS 示例 但没有成功 ms input placeholder IE10 11 color ccc important font wei
  • 使用时间序列数据和scaleBand指定D3条形图上的刻度

    我尝试为具有时间序列数据的 d3 v4 条形图指定多个刻度和多个刻度标签 如下图所示 基于本教程 https bl ocks org zigahertz 1ee4965ff76514517bb7ce6af21e5d44我有一个处理时间序列数
  • 在java中将DataURL图像转换为图像文件

    我在我的 java servlet 中接收图像 DataURL 它看起来像 data image jpeg base64 9j 4AAQSkZJRgABAQAAAQABAA 我需要将其另存为图像文件 我该怎么做 The simplest w
  • 如何创建环境变量来保护我的网站的 Google 地图 API 密钥(或任何其他秘密值)?

    我正在学习使用 Bootstrap 编写自己的网站 并使用 Google 地图 API 密钥和 Google Developers 的脚本轻松地将地图放置在我的页面上 理想情况下 我会有类似的东西 即我已经尝试过这个 Html PHP
  • Bootstrap下拉菜单文本颜色

    所以我第一次使用 Twitter 的 Bootstrap 我试图在下拉菜单折叠后更改其文本的颜色 如果有道理的话 I used 当您压缩网页以显示折叠菜单并转到下拉列表时 您会看到蓝色背景转移到下拉菜单项 但字体颜色为黑色 使其很难阅读 我
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j

随机推荐

  • 我使用 AFNetWorking 时出现错误代码 -1011

    我在我们的客户公司做服务 我尝试通过 AFNetWorking 从他们的服务器获取一些信息 我们的客户鼓励使用 AFNetWorking 我使用 AFNetWorking 做了一些示例 并且成功了 但是当我使用我们的客户 URL 之一来获取
  • 如何调用Blazor服务器端CircuitHandler中的方法?

    我正在通过 Blazor 服务器端制作一个聊天室应用程序 我想显示每个用户的在线状态 我问了一个关于如何在关闭页面时获取事件的问题如何在 blazor 服务器端关闭页面时获取事件 现在看来CircuitHandler是最好的选择 当用户关闭
  • Python 快速排序 - 列表理解与递归(分区例程)

    我看了演讲 三个美丽的快速排序 并开始尝试快速排序 我在 python 中的实现与 c 非常相似 选择枢轴 围绕它进行分区并在较小和较大的分区上递归 我以为不是pythonic 这就是在 python 中使用列表理解的实现 def qsor
  • 如何在 Nginx 上使用 FastCGI 防止网关超时

    我正在运行 Django FastCGI 和 Nginx 我正在创建一个 api 人们可以通过 XML 发送一些数据 我将处理这些数据 然后为发送过来的每个节点返回一些状态代码 问题是 如果我处理 XML 的时间太长 我认为超过 60 秒
  • 当我尝试使用 UI Automation for PowerPoint 2013 时,我只能在使用 RangeFromPoint 时获取第一个字符/单词

    该代码适用于 Word 和 Outlook 但不适用于 PowerPoint 因为仅选择文本框的第一个字符或第一个单词 这是一个错误吗 有什么解决方法吗 在 PowerPoint 2013 中的简单 PowerPoint 幻灯片上尝试此操作
  • IOMobileFramebufferGetLayerDefaultSurface 在 iOS 9 上不起作用

    我的主要问题是 如何对已经存在但在新版本的 iOS 中进行了修改的私有 API 函数进行逆向工程 我创建了一个 iOS 应用程序来使用 IOSurface 和 IOMobileFramebuffer 记录屏幕内容 帧缓冲区用于打开它的主要函
  • 如何从单个 Jenkins Pipeline 并行块获取 stdout 和 stderr?

    我正在使用一个parallel阻止到我的 Jenkinsfile 中同时执行一些测试 但所有输出都变得混乱 这是我的 Jenkinsfile 的摘录 例如 do some IT against different databases sta
  • 使用 ramda group by 属性并对指定属性求和结果

    我需要帮助使用 ramda 转换对象数组 我想 按指定属性分组 对另一个属性求和 结果集 给定一个像这样的数组 var arr title scotty age 22 score 54 hobby debugging title scott
  • 如何访问 GridSearchCV 中的 ColumnTransformer 元素

    当引用 grid search 的 param grid 中的 ColumnTransformer 它是管道的一部分 中包含的单个预处理器时 我想找出正确的命名约定 环境和样本数据 import seaborn as sns from sk
  • 将 Windows 时区转换为 moment.js 时区?

    我们在 ASP NET 中有一个应用程序 它以 Windows 格式存储所有用户时区数据 通过 TimeZoneInfo Id 我们还使用 moment js 和 moment js TimeZone 库将 UTC 数据转换为客户端的用户数
  • Gradle 没有以正确的方式寻找依赖关系

    我正在尝试将 moko 添加到 gradle 上的 kotlin multiplataform 的依赖项 org gradle internal resolve ArtifactNotFoundException 找不到 mvvm live
  • 什么是实体?为什么叫实体?

    在谈论实体框架时 什么是实体 它是数据存储的内存中表示 例如 SQL 表 实体足够聪明 可以跟踪更改并将这些更改应用到数据存储中 还有什么其他的吗 它来自系统工程领域 他们使用实体关系图设计系统的工具 他们所做的首先是布置实体 例如客户 采
  • 可以在 Javascript 中比较两个图像吗?

    有没有办法比较两个具有不同文件名的图像文件 所以我想看看它们是否与 javascript 相同 这可能吗 这样做的用途 我有一个图像库需要在灯箱中弹出 当灯箱打开时 我将连接到回调以检查重复的图像 并在找到时将它们从灯箱库中删除 这样用户就
  • 无法在 TypeScript 中从 Observable.bindNodeCallback(fs.readFile) 创建 observable

    我正在尝试使用rxjs 5用 TypeScript 编写 Node js 服务器 但在转换时遇到错误fs readFile其 rxjs 形式 我希望以下代码可以在 TypeScript 中运行 This is a JavaScript ex
  • 清除矩形不工作

    我正在用 javascript 做一个 Pong 游戏 以便学习制作游戏 并且我想让它面向对象 我无法得到clearRect上班 它所做的只是画一条越来越长的线 这是相关代码 function Ball this radius 5 this
  • 在C中将int转换为char

    现在我正在尝试在 C 编程中将 int 转换为 char 经过研究 我发现我应该能够这样做 int value 10 char result char value 我想要的是返回 A 0 9 返回 0 9 但我认为这会返回一个新行字符 我的
  • 如何检查变量或对象是否未定义?

    我一直以为我可以通过将未定义的变量与未定义的变量进行比较来检查它 但这是我在 chrome 控制台中收到的错误 我如何检查 jQuery 对象是否未定义 EDIT if jQuery 也给我带来了问题 EDIT 解决方案 if window
  • 使用 Google Analytics 进行 Flutter 日志事件

    我已经在我的 flutter 应用程序中设置了 Google Analytics 这一切似乎都按标准运行 数据通过并显示在分析控制台屏幕上 向用户显示 事件计数之类的事情 我看到默认事件是 user engagement screen vi
  • CakePHP 3.0 -> 查找条件之间

    是否可以执行 BETWEEN AND cakephp 2 5 中的条件类似于 cakephp 2 5 在 cakephp 2 5 中我写了类似的东西 conditions gt start date BETWEEN AND gt 2014
  • 如何使用 css 隐藏元素,同时仍将其保留在页面上?

    我试图隐藏页面上的一个元素 但我仍然希望它存在 我想要一个仍然可以单击的按钮 但我希 望它不可见 隐藏元素并保持页面位置的方法有3种 您可以获得有关之间的更多信息正常流量和css样式 即 opcity visibility 属性关系 能见度