技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSS隐藏元素的10种方法之:缩小尺寸

作者:admin    时间:2022-11-2 11:38:37    浏览:

在前面文章我们介绍了可以通过使用::after伪元素隐藏元素,本文将继续介绍另一种CSS隐藏元素的方法:缩小尺寸。

 CSS隐藏元素的10种方法之:缩小尺寸

demodownload

实例

HTML

<ol class="hide" tabindex="0">
  <li>one</li>
  <li class="hide-item">two</li>
  <li>three</li>
</ol>

<p>鼠标移到任何一个盒子上隐藏盒子two,<br>使用 <b>height: 0;</b> 。</p>

CSS

/* hide element */
.hide:hover .hide-item,
.hide:focus .hide-item {
  height: 0;
  padding: 0;
  overflow: hidden;
}

/* other styles */
body {
  font-family: sans-serif;
  font-size: 100%;
  color: #222;
  background-color: #fff;
}

p {
  text-align: center;
}

.hide {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hide > * {
  flex: 0 0 25%;
  font-size: 2em;
  text-align: center;
  padding: 1em 0;
  margin: 0.2em;
  background-color: #ccc;
  border-radius: 0.5em;
  user-select: none;
}

.hide-item {
  background-color: #f66;
  cursor: pointer;
}

代码解释

可以通过使用widthheightpaddingborder-widthfont-size 或最小化元素的尺寸来隐藏元素。可能还需要使用overflow: hidden;以确保内容不会溢出。

有趣的动画效果是可能的,但使用transform的性能明显更好。

度量标准 影响
浏览器支持 非常好
可访问性 内容仍在阅读
布局受影响? 是的
渲染要求 布局
表现 较差的
动画帧可能吗? 是的
隐藏时可触发事件吗?

相关文章

标签: css  CSS隐藏元素  
x
  • 站长推荐
/* 左侧显示文章内容目录 */