如何在悬停在不同文本上时多次更改图像答案

【问题标题】：How to change an image multiple times while hovering on different texts如何在悬停在不同文本上时多次更改图像
【发布时间】：2021-04-26 05:50:07
【问题描述】：

我是制作作品集网站的设计师。我知道 HTML 和 CSS 的基础知识。这是我的主页

我想要的是，当我们将鼠标悬停在右侧的不同文本上时，不同的图像会显示在红色圆圈中，作为该项目的预览。这是如何实现的？我必须使用JS吗？

【问题讨论】：

标签： javascript html css web website-homepage

【解决方案1】：

为此，您需要 javascript。

我会使用mouseenter 事件。当光标进入元素时触发。基本语法是：

element.addEventListener("mouseenter", event => {
    // This executes when the cursor enters the element
    alert("Entered");
});

您只需要浏览右侧的所有选项，并为每个选项添加一个将图像设置为其他内容的侦听器：

for (let option of options) {
    option.addEventListener("mouseenter", event => {
        image.src = "/image-url.png"; // Somehow get the image url for this option
    }
});

为了获取特定的图像 url - 其中一种方法是每个选项上的 data-something 属性。我在这里做了一个简单的例子：https://jsfiddle.net/8jb4p6qw/24/

【讨论】：

【解决方案2】：

我会做这样的事情

    object.addEventListener("focus", function(){
      
            object.append('<div id="myid">info</div>');
    });
    
    object.addEventListener("focusout", function(){
    
     document.getElementbyId('myid').remove();
    
    
    });

【讨论】：