时间戳

首页 > 解决方案 > 如何在悬停在不同文本上时多次更改图像

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

问题描述

我是制作投资组合网站的设计师。我知道 HTML 和 CSS 的基础知识。这是我的主页主页

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

标签： javascripthtmlcsswebwebsite-homepage

解决方案

为此，您将需要 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/

推荐阅读