如何解决如何在悬停在不同文本上时多次更改图像
我是制作作品集网站的设计师。我知道 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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。