CSS（Cascading Style Sheets）是一種用于網頁樣式設計的語言。不僅可以美化網頁，還可以實現許多JS（JavaScript）也可以完成的功能。在這篇文章中，我們將探討一些使用CSS代替JS的例子。

1. 鼠標懸浮觸發事件：

.hover {
background-color: red;
}
.hover:hover {
background-color: blue;
}

上述代碼可以實現鼠標懸浮時，改變元素的背景顏色。這是一項常見的交互效果，使用CSS可以避免必要的JS操作。

2. 展開/收起效果：

.content {
max-height: 0;
transition: max-height 0.3s ease-out;
overflow: hidden;
}
.open {
max-height: 50px;
}

以上代碼可以實現一個展開/收起的效果。當.content元素有.open類時，元素高度變為50px。用戶可以通過添加或移除.open類來實現效果。

3. 滾動動畫：

.scroll {
opacity: 0;
transform: translateY(50px);
transition: all 1s;
}
.show {
opacity: 1;
transform: translateY(0);
}

這段代碼可以在頁面滾動到.scroll元素時，使元素由下往上動畫顯示。通過監聽滾動事件來觸發添加.show類，從而實現動畫效果。

總結

在許多情況下，使用CSS可以替代JS。因為CSS具有很好的渲染速度，可以更好地提升用戶體驗。當需要頻繁進行DOM操作時，建議使用JS。