Hover Service Index
介绍
三栏服务索引：左侧等宽小标签，中间一列大号粗体服务名，未选中为浅灰，悬停或聚焦的一项变黑，右侧竖图随之交叉淡入并轻微缩放；没有交互时按顺序自动轮换。
拆自整页模板 厚土 创意工作室首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Hover Service Index 加进你的项目并换成你的配色。
适用场景
标题动效、客户证言、强调文案和大字排版。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add houtu-service-list
mcp › 使用 8pt MCP 调用 get_component("houtu-service-list")
代码
Hover Service Index 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-hsl"><p class="x-hsl__lbl">服务</p><div><ul class="x-hsl__list"><li><button type="button" class="is-on">品牌</button></li><li><button type="button">数字</button></li><li><button type="button">内容</button></li><li><button type="button">动态</button></li><li><button type="button">印刷</button></li></ul><a class="x-hsl__more" href="#">查看更多<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12h15"/><path d="m13.5 6 6 6-6 6"/></svg></a></div><div class="x-hsl__frame"><img class="is-on" src="https://8pt.dev/api/media/0323c8430eefc3479f288435.webp" alt="彩色粗针织物"><img src="https://8pt.dev/api/media/753a33bd99dc9499d42f843e.webp" alt="版式海报与色卡"><img src="https://8pt.dev/api/media/ee76c50d97626dae74b76707.webp" alt="工作间里整理礼服的匠人"><img src="https://8pt.dev/api/media/5ecdf074ff94f69a69c7b033.webp" alt="漂浮的镜面缎带"><img src="https://8pt.dev/api/media/464d4d88e7c42a8bfe0d0409.webp" alt="黄色包装的能量棒"></div></div>
@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Inter+Tight:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;600&family=ZCOOL+QingKe+HuangYou&display=swap");.x-hsl{display:grid;grid-template-columns:22% 1fr 420px;width:100%;max-width:1160px;box-sizing:border-box;padding:40px 28px;background:#FFFFFF;color:#000;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif}.x-hsl__lbl{margin:0;font-family:"Fragment Mono","Noto Sans SC",ui-monospace,monospace;font-size:12px;letter-spacing:.06em}.x-hsl__list{list-style:none;margin:0;padding:0}.x-hsl__list button{display:block;padding:0;border:0;background:none;font-family:inherit;font-size:66px;font-weight:700;line-height:1.04;letter-spacing:-.02em;color:#D6D5D3;cursor:pointer;transition:color .3s}.x-hsl__list button.is-on{color:#2B2A27}.x-hsl__more{display:inline-flex;align-items:center;gap:6px;margin-top:48px;height:28px;padding:0 14px;border-radius:6px;background:#F2F2EF;color:#000;font-size:13px;font-weight:500;text-decoration:none}.x-hsl__more svg{width:13px;height:13px}.x-hsl__frame{position:relative;width:420px;height:540px;border-radius:6px;overflow:hidden;background:#F2F2EF}.x-hsl__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s,transform 1.2s cubic-bezier(.2,.7,.2,1)}.x-hsl__frame img.is-on{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.x-hsl__frame img,.x-hsl__list button{transition:none}}(root) => {
const btns = [...root.querySelectorAll(".x-hsl__list button")];
const imgs = [...root.querySelectorAll(".x-hsl__frame img")];
let cur = 0, timer = null;
const pick = (i) => { cur = i; btns.forEach((b, k) => b.classList.toggle("is-on", k === i)); imgs.forEach((m, k) => m.classList.toggle("is-on", k === i)); };
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const start = () => { if (reduce || timer) return; timer = setInterval(() => pick((cur + 1) % btns.length), 2600); };
const stop = () => { clearInterval(timer); timer = null; };
const hs = btns.map((b, i) => { const h = () => { stop(); pick(i); }; b.addEventListener("mouseenter", h); b.addEventListener("focus", h); b.addEventListener("click", h); return h; });
root.addEventListener("mouseleave", start);
start();
return () => { stop(); root.removeEventListener("mouseleave", start); btns.forEach((b, i) => { b.removeEventListener("mouseenter", hs[i]); b.removeEventListener("focus", hs[i]); b.removeEventListener("click", hs[i]); }); };
…订阅 Builder 查看完整源码。查看价格