Javascript 如何在悬停在不同文本上时多次更改图像
我是一名设计师,正在制作一个投资组合网站。我知道HTML和CSS的基础知识。这是我的主页Javascript 如何在悬停在不同文本上时多次更改图像,javascript,html,css,web,website-homepage,Javascript,Html,Css,Web,Website Homepage,我是一名设计师,正在制作一个投资组合网站。我知道HTML和CSS的基础知识。这是我的主页 我想要的是,当我们将鼠标悬停在右边的不同文本上时,不同的图像会显示在红色圆圈中,作为该项目的预览。这是如何实现的?我必须使用JS吗?我会这样做 object.addEventListener("focus", function(){ object.append('<div id="myid">info</
我想要的是,当我们将鼠标悬停在右边的不同文本上时,不同的图像会显示在红色圆圈中,作为该项目的预览。这是如何实现的?我必须使用JS吗?我会这样做
object.addEventListener("focus", function(){
object.append('<div id="myid">info</div>');
});
object.addEventListener("focusout", function(){
document.getElementbyId('myid').remove();
});
object.addEventListener(“焦点”,函数(){
append('info');
});
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
属性。我在这里举了一个简单的例子: