Hover菜单图片不显示
在控制台运行代码确认：
fetch('/wp-json/wp/v2/posts?per_page=5&categories=1413&_embed=1')
.then(r => r.json())
.then(posts => {
posts.forEach(p => {
const img = p?._embedded?.["wp:featuredmedia"]?.[0]?.source_url;
console.log(p.title.rendered, '→', img);
});
});图片 URL 全部正常拿到了，每篇文章都有完整的 https:// 图片地址。所以确认是数据没问题，是其他原因导致图片无法显示在 cursor 里。
换个方向排查。
在控制台测试图片能否加载：
const img = new Image();
img.crossOrigin = "anonymous";
img.onload = () => console.log("✅ 图片加载成功", img.src);
img.onerror = (e) => console.log("❌ 图片加载失败", e);
img.src = "https://houmengwei.com/wp-content/uploads/2026/02/DSC06819-scaled.jpg";图片加载完全正常。说明图片本身没有任何问题。
在控制台继续检查 DOM 状态：
const items = document.querySelectorAll(".hm-item");
const cursor = document.getElementById("hm-cursor");
console.log("hm-item 数量:", items.length);
console.log("hm-cursor 存在:", !!cursor);
items.forEach((item, i) => {
console.log(`第${i+1}项 data-image:`, item.getAttribute("data-image"));
});
if(cursor) {
const style = getComputedStyle(cursor);
console.log("cursor display:", style.display);
console.log("cursor position:", style.position);
console.log("cursor z-index:", style.zIndex);
}所有数据都完全正常：
hm-item ✅
hm-cursor 存在 ✅
图片URL全部有值 ✅
display: block / position: fixed / z-index: 9999 ✅
说明DOM和CSS都没问题。
继续排查cursor 是否被父容器裁切掉：
(function() {
var cur = document.getElementById("hm-cursor");
cur.style.opacity = "1";
cur.style.transform = "translate3d(100px, 100px, 0)";
var el = cur.parentElement;
while(el) {
var s = getComputedStyle(el);
if(s.overflow !== 'visible' || s.clipPath !== 'none' || s.transform !== 'none') {
console.log("⚠️", el.tagName, el.className);
console.log(" overflow:", s.overflow);
console.log(" clip-path:", s.clipPath);
console.log(" transform:", s.transform);
}
el = el.parentElement;
}
console.log("检查完毕");
})();正常显示「检查完毕」，且没有任何报错。说明父元素没有裁切问题。
但同时页面cursor预览框也没有出现，虽然设置了 opacity:1 和位置。
这说明问题是：cursor里的图片没有渲染出来（cursor本身是黑色背景，应该能看到一个黑色方块，但完全不可见）。
接下来，检查cursor的实际尺寸和位置：
(function() {
var cur = document.getElementById("hm-cursor");
var rect = cur.getBoundingClientRect();
console.log("cursor实际位置:", JSON.stringify(rect.toJSON()));
console.log("cursor子元素数量:", cur.children.length);
console.log("cursor innerHTML:", cur.innerHTML.substring(0, 200));
})();显示："width":0,"height":202.39...
cursor 的宽度是 0！ 高度正常（202px）但宽度是 0，所以完全不可见。
原因应是主题覆盖了 .hm-cursor 的宽度，导致变成 0，所以图片无法显示。
解决方案：用内联 style 直接写在标签上，优先级最高，这样可以绕过主题的干扰。
页面代码中把 <div id="hm-cursor"> 改成：
<div id="hm-cursor" class="hm-cursor" aria-hidden="true" style="width:320px;max-width:320px;height:220px;position:fixed;top:0;left:0;"></div>