如何用JavaScript实现链接悬停时在Div显示对应图片（禁用CSS与innerHTML）

Here's how you can implement the hover image effect using only JavaScript (no CSS or innerHTML), building on your existing code:

Step-by-Step Explanation & Complete Code #

Finish your window.load event listener with the following logic to add the hover functionality:

window.addEventListener("load", function(){
    // Your existing style setup code
    var backG = document.getElementById("b");
    backG.style.backgroundColor = "#eee";
    var h = document.getElementById("head");
    h.style.textAlign = "center";
    h.style.margin = "50px";
    var x = document.getElementById("ulist");
    x.style.textAlign = "center";
    var lis = x.getElementsByTagName("li");

    // --- New code for hover image effect ---
    // 1. Get your target div where images will appear (replace 'imageDisplay' with your div's actual ID)
    const imageContainer = document.getElementById("imageDisplay");
    
    // 2. Create a reusable image element (no innerHTML used here!)
    const hoverImage = document.createElement("img");
    // Set initial styles to hide the image and control its appearance
    hoverImage.style.display = "none";
    hoverImage.style.maxWidth = "300px";
    hoverImage.style.height = "auto";
    hoverImage.style.padding = "8px"; // Optional styling
    imageContainer.appendChild(hoverImage);

    // 3. Map each link to its corresponding image URL (match the order of your list items)
    const imageUrlMap = [
        "https://example.com/your-first-image.jpg",
        "https://example.com/your-second-image.jpg",
        "https://example.com/your-third-image.jpg"
        // Add more URLs for every link in your list
    ];

    // 4. Attach hover events to each link
    for (let i = 0; i < lis.length; i++) {
        const link = lis[i].querySelector("a");
        if (!link) continue; // Skip list items that don't contain a link

        // Mouseover: Show the matching image
        link.addEventListener("mouseover", () => {
            hoverImage.src = imageUrlMap[i];
            hoverImage.style.display = "block";
        });

        // Mouseout: Hide the image
        link.addEventListener("mouseout", () => {
            hoverImage.style.display = "none";
            // Optional: Clear the image source to stop unnecessary loading
            // hoverImage.src = "";
        });
    }
});

Key Details That Meet Your Requirements: #

• No innerHTML: We use document.createElement("img") to generate the image element dynamically, avoiding any HTML injection.
• Pure JavaScript: All styling (hiding/showing, sizing) is done via the element's style property—no external CSS needed.
• Efficient Reuse: Instead of creating a new image for each hover, we update the src of a single reusable image element.
• Correct Scope: Using let in the loop ensures each event listener references the correct link-image pair. For older browser support, wrap the listener in an IIFE (immediately invoked function expression) to preserve the index value.

HTML Setup Notes: #

Ensure your HTML includes:

1. A list with the ID ulist, containing <li> elements that wrap <a> tags.
2. A target div (e.g., <div id="imageDisplay"></div>) where hover images will render.

内容的提问来源于stack exchange，提问作者tudopassa