css实现js
CSS 实现 JavaScript 功能
CSS 可以通过伪类、动画、变量等特性模拟部分 JavaScript 的功能，例如交互效果、状态切换等。以下是几种常见的 CSS 替代 JavaScript 的方案。
交互效果：悬停显示内容
通过 :hover 伪类实现鼠标悬停时显示隐藏内容，无需 JavaScript。
.tooltip {
position: relative;
}
.tooltip-content {
display: none;
position: absolute;
background: #333;
color: white;
padding: 5px;
}
.tooltip:hover .tooltip-content {
display: block;
}<div class="tooltip">
Hover me
<div class="tooltip-content">Tooltip text</div>
</div>状态切换：复选框控制样式
利用 :checked 伪类和相邻兄弟选择器实现开关效果。
.toggle-content {
display: none;
}
#toggle:checked ~ .toggle-content {
display: block;
}<input type="checkbox" id="toggle">
<label for="toggle">Toggle</label>
<div class="toggle-content">Content appears here</div>动画效果：自动播放轮播
通过 CSS 动画和关键帧实现无限轮播，无需 JavaScript 控制。
.slider {
animation: slide 10s infinite;
}
@keyframes slide {
0% { transform: translateX(0); }
33% { transform: translateX(-100%); }
66% { transform: translateX(-200%); }
100% { transform: translateX(0); }
}动态计算：CSS 变量
使用 CSS 变量（Custom Properties）实现动态样式调整。
:root {
--primary-color: blue;
}
.button {
background: var(--primary-color);
}
.button:hover {
background: lightblue;
}响应式布局：媒体查询
通过媒体查询替代 JavaScript 的窗口大小监听，实现响应式布局。
.container {
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 50%;
}
}注意事项
CSS 替代 JavaScript 的方案适用于简单交互和视觉效果，但无法处理复杂逻辑（如数据请求、条件判断等）。实际开发中需根据需求权衡使用。
