问题描述
我是制作作品集网站的设计师。我知道 HTML 和 CSS 的基础知识。这是我的主页
我想要的是当我们将鼠标悬停在右侧的不同文本上时,不同的图像会显示在红色圆圈中,作为该项目的预览。这是如何实现的?我必须使用 JS 吗?
解决方法
我会做这样的事情
object.addEventListener("focus",function(){
object.append('<div id="myid">info</div>');
});
object.addEventListener("focusout",function(){
document.getElementbyId('myid').remove();
});
,
为此,您需要 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/