色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 列表滑動刪除

劉姿婷2年前16瀏覽0評論

CSS 列表滑動刪除是一種非常實用的效果,能讓用戶快速而方便地刪除多余的列表項。下面我們將介紹如何使用 CSS 來實現這種效果。

/* HTML 結構 */
<ul class="list">
<li>列表項 1</li>
<li>列表項 2</li>
<li>列表項 3</li>
<li>列表項 4</li>
<li>列表項 5</li>
</ul>
/* CSS 樣式 */
.list {
list-style: none;
}
.list li {
position: relative;
}
.list li:before {
content: '刪除';
display: block;
position: absolute;
top: 0;
right: -80px;
width: 80px;
height: 100%;
background-color: red;
color: white;
text-align: center;
line-height: 40px;
font-size: 16px;
transition: all 0.3s ease;
}
.list li:hover:before {
right: 0;
}
.list li:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
border: 1px solid red;
transition: all 0.3s ease;
}
.list li:hover:after {
width: 80px;
}

上述樣式中,通過在每個列表項上設置position: relative;,并在其上部疊加一個position: absolute;的偽元素來實現滑動刪除的效果。在偽元素中設置了寬度為 80px 的紅色背景及相應的刪除文字。

通過為列表項和偽元素設置過渡效果transition: all 0.3s ease;,在鼠標懸浮時可以呈現出平滑的滑動刪除效果。

總的來說,這種 CSS 列表滑動刪除效果十分簡單實用,可以大大提升用戶操作列表的效率。在實現時需要注意兼容性及結構上的合理性,以確保效果的可靠性和性能。