技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS隱藏元素的10種方法之:縮小尺寸

作者:admin    時間:2022-11-2 11:38:37    瀏覽:

在前面文章我們介紹了可以通過使用::after偽元素隱藏元素,本文將繼續(xù)介紹另一種CSS隱藏元素的方法:縮小尺寸。

 CSS隱藏元素的10種方法之:縮小尺寸

demodownload

實(shí)例

HTML

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

<p>鼠標(biāo)移到任何一個盒子上隱藏盒子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;
}

代碼解釋

可以通過使用width、heightpaddingborder-width、font-size 或最小化元素的尺寸來隱藏元素??赡苓€需要使用overflow: hidden;以確保內(nèi)容不會溢出。

有趣的動畫效果是可能的,但使用transform的性能明顯更好。

度量標(biāo)準(zhǔn) 影響
瀏覽器支持 非常好
可訪問性 內(nèi)容仍在閱讀
布局受影響? 是的
渲染要求 布局
表現(xiàn) 較差的
動畫幀可能嗎? 是的
隱藏時可觸發(fā)事件嗎?

相關(guān)文章

標(biāo)簽: css  CSS隱藏元素  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */