CSS 怎么设置 button 元素不可见? 下面本篇文章给大家介绍一些 CSS 隐藏页面元素常用方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
用 CSS 隐藏页面元素 (例 button 元素) 有许多种方法. 你可以将 opacity 设为 0, 将 visibility 设为 hidden, 将 display 设为 none 或者将 position 设为 absolute, 然后将位置设到不可见区域.
Opacity
opacity 属性的意思是设置一个元素的透明度. 它不是为改变元素的边界框 (bounding box) 而设计的. 这意味着将 opacity 设为 0 只能从视觉上隐藏元素. 而元素本身依然占据它自己的位置并对网页的布局起作用. 它也将响应用户交互.
- .hide {
- opacity: 0;
- }
如果你打算使用 opacity 属性在读屏软件中隐藏元素, 很不幸, 你并不能如愿. 元素和它所有的内容会被读屏软件阅读, 就像网页上的其他元素那样. 换句话说, 元素的行为就和它们不透明时一致.
我还要提醒一句, opacity 属性可以用来实现一些效果很棒的动画. 任何 opacity 属性值小于 1 的元素也会创建一个新的堆叠上下文(stacking context).
Visibility
第二个要说的属性是 visibility. 将它的值设为 hidden 将隐藏我们的元素. 如同 opacity 属性, 被隐藏的元素依然会对我们的网页布局起作用. 与 opacity 唯一不同的是它不会响应任何用户交互. 此外, 元素在读屏软件中也会被隐藏.
这个属性也能够实现动画效果, 只要它的初始和结束状态不一样. 这确保了 visibility 状态切换之间的过渡动画可以是时间平滑的(事实上可以用这一点来用 hidden 实现元素的延迟显示和隐藏 -- 译者注).
- .hide {
- visibility: hidden;
- }
注意, 如果一个元素的 visibility 被设置为 hidden, 同时想要显示它的某个子孙元素, 只要将那个元素的 visibility 显式设置为 visible 即可(就如例子里面的 .o-hide p-- 译者注). 尝试只 hover 在隐藏元素上, 不要 hover 在 p 标签里的数字上, 你会发现你的鼠标光标没有变成手指头的样子. 此时, 你点击鼠标, 你的 click 事件也不会被触发.
而在 <div> 标签里面的 <p> 标签则依然可以捕获所有的鼠标事件. 一旦你的鼠标移动到文字上,<div> 本身变得可见并且事件注册也随之生效.
Display
display 属性依照词义真正隐藏元素. 将 display 属性设为 none 确保元素不可见并且连盒模型也不生成. 使用这个属性, 被隐藏的元素不占据任何空间. 不仅如此, 一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效. 此外, 读屏软件也不会读到元素的内容. 这种方式产生的效果就像元素完全不存在.
任何这个元素的子孙元素也会被同时隐藏. 为这个属性添加过渡动画是无效的, 它的任何不同状态值之间的切换总是会立即生效.
不过请注意, 通过 DOM 依然可以访问到这个元素. 因此你可以通过 DOM 来操作它, 就像操作其他的元素.
- .hide {
- display: none;
- }
- Position
假设有一个元素你想要与它交互, 但是你又不想让它影响你的网页布局, 没有合适的属性可以处理这种情况(opacity 和 visibility 影响布局, display 不影响布局但又无法直接交互 -- 译者注). 在这种情况下, 你只能考虑将元素移出可视区域. 这个办法既不会影响布局, 有能让元素保持可以操作. 下面是采用这种办法的 CSS:
- .hide {
- position: absolute;
- top: -9999px;
- left: -9999px;
- }
这种方法的主要原理是通过将元素的 top 和 left 设置成足够大的负数, 使它在屏幕上不可见. 采用这个技术的一个好处 (或者潜在的缺点) 是用它隐藏的元素的内容可以被读屏软件读取. 这完全可以理解, 是因为你只是将元素移到可视区域外面让用户无法看到它.
你得避免使用这个方法去隐藏任何可以获得焦点的元素, 因为如果那么做, 当用户让那个元素获得焦点时, 会导致一个不可预料的焦点切换. 这个方法在创建自定义复选框和单选按钮时经常被使用.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17253.html