英文:
Change image when hovering over text with JavaScript
问题
我有一个使用flexbox的布局，其中有一个用于图像的div，另一个带有文本链接的div。看起来是这样的：
我想实现这样的效果：当你悬停在文本链接上时，初始图像将更改为另一张图像，然后在你从文本悬停移开时再次更改为第一张图像。
但我不确定如何编写JavaScript来实现这一点。我在网上找到的大多数示例只是解释了在悬停在图像本身时如何更改图像。我想知道是否有人有在悬停在不同元素上更改图像的示例？
谢谢！
这只是我flexbox的html和css的简化版本，我不知道如何编写或实现脚本。
HTML:
<div class="topics">
<div class="links">
<a href="#"><p>Topic 1</p></a>
<a href="#"><p>Topic 2</p></a>
<a href="#"><p>Topic 3</p></a>
</div>
<div class="image">
<img src="#">
</div>
</div>
CSS:
div.topics {
display: flex;
flex-direction: row;
border: 5px solid black;
}
@media (max-width: 560px) {
div.topics {
flex-direction: column;
}
}
div.links {
flex: 60%;
}
div.image {
flex: 40%;
}
英文:
I have a flexbox with a div for an image and another div with text links. It looks something like this:
I'd like to make it so that when you hover over a text link, the initial image will change to a different image, then change back to the first image once you hover away from the text.
But I'm not sure how to write the JavaScript to do this. Most of the examples I found online only explain how to change the image when hovering over the image itself. I was wondering if anyone has an example of changing the image when hovering over a different element?
Thanks!
This is just a simplified version of the html and css for my flexbox, I'm not sure how to write or implement the script.
HTML:
<div class="topics">
<div class="links">
<a href="#"><p> Topic 1 </p></a>
<a href="#"><p> Topic 2 </p></a>
<a href="#"><p> Topic 3 </p></a>
</div>
<div class="image">
<img src="#">
</div>
</div>
CSS:
div.topics {
display: flex;
flex-direction: row;
border: 5px solid black;
}
@media (max-width: 560px) {
div.topics {
flex-direction: column;
}
}
div.links {
flex: 60%;
}
div.image {
flex: 40%;
}
答案1
得分: 1
你可以使用 justify-content:space-between。
英文:
You can do with justify-content:space-between
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify-content_space-between
答案2
得分: 0
你可以监听目标元素的mouseenter和mouseleave事件。在mouseenter时，附加新的URL src；在mouseleave时，将其设置回默认的src。
HTML
<div class="topics">
<div class="links">
<a href="#"><p>主题1</p></a>
<a href="#"><p>主题2</p></a>
<a href="#"><p>主题3</p></a>
</div>
<div class="image">
<img id="my-img" src="">
</div>
</div>
CSS
.topics {
display: flex;
}
img {
width: 100px;
height: 100px;
}
JS
const imageUrls = [
"url1", // 默认URL
"url2",
"url3"
];
const links = document.getElementsByTagName("a");
const imageEl = document.getElementById("my-img");
imageEl.setAttribute('src', imageUrls[0]); // 设置默认图像
for(let i = 0; i < links.length; i++) {
links[i].addEventListener("mouseenter", (e) => {
imageEl.src = imageUrls[i];
});
links[i].addEventListener("mouseleave", (e) => {
imageEl.setAttribute('src', imageUrls[0])
});
}
英文:
You can listen for mouseenter and mouseleave events for the target elements. On mouseenter, attach a new url src; on mouseleave set it back to the default src.
HTML
<div class="topics">
<div class="links">
<a href="#"><p> Topic 1 </p></a>
<a href="#"><p> Topic 2 </p></a>
<a href="#"><p> Topic 3 </p></a>
</div>
<div class="image">
<img id = "my-img" src="">
</div>
</div>
CSS
.topics {
display: flex;
}
img {
width: 100px;
height: 100px;
}
JS
const imageUrls = [
"url1" , // default URL
"url2",
"url3"
];
const links = document.getElementsByTagName("a");
const imageEl = document.getElementById("my-img");
imageEl.setAttribute('src', imageUrls[0]); // Set default image
for(let i = 0; i < links.length; i++) {
links[i].addEventListener("mouseenter", (e) => {
imageEl.src = imageUrls[i];
});
links[i].addEventListener("mouseleave", (e) => {
imageEl.setAttribute('src', imageUrls[0])
});
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论