问题描述
我创建了一个图像轮播,显示带有附加信息的图像。都是动态生成的。将鼠标悬停在其他动态创建的图像(拇指)上时,我希望显示该图像的更大版本。在本地,叠加层以我想要的方式显示了更大的图像。它是在屏幕中央带有较大图像的叠加层。然而,当部署(gh-pages 或 netlify)时,鼠标悬停事件仅在第二次尝试时起作用。第一次只显示一秒钟,隐藏在其他元素后面然后消失?或者它闪烁开/关。
overlay html 元素已经存在于 DOM 中并设置为 display: none;必须显示在中心的图像是动态添加的。
将鼠标悬停在代码片段中的图像图标上时,它似乎可以正常工作,但在部署时则不行。怎么来的?
const countries = [
{
capital: "Prague",capitalPic: "images/city1.jpg",population: "10.729.258",language: "Czech",currency: "Euro (€)",image: "images/czechred.png",},{
capital: "Berlin",capitalPic: "images/city2.jpg",population: "83.840.000",language: "German",image: "images/germany.png",]
const imagesBig = ["czechredbig.png","germanyredbig.png"]
const images = ["city1.jpg","city2.jpg"]
const country = ["Czech republic","Germany"]
let index = 0
let count = 1
//add info
function addInfo() {
document.querySelector('.information').innerHTML =
`<div>Capital: ${countries[index].capital}</div>`
document.querySelector('.map').innerHTML = `<img src="${countries[index].image}">`
}
addInfo()
const buttons = [...document.querySelectorAll('.btn')]
buttons.forEach(button => {
button.addEventListener('click',function (e) {
if (e.target.textContent === "next") {
index++
count++
}
if (e.target.textContent === "prev") {
index--
count--
}
if (index > images.length - 1) {
index = 0
count = 1
}
if (index < 0) {
index = images.length - 1
count = images.length
}
addInfo()
})
})
const element = document.querySelector('.map')
const events = ["mouSEOver","mouSEOut"]
events.forEach(event => {
element.addEventListener(event,function () {
if (event === "mouSEOver") {
document.querySelector('.mapOverlay').style.display = "flex";
document.querySelector('.mapOverlay').innerHTML = `<img src="images/${imagesBig[index]}" class="mapPopup" >`
};
if (event === "mouSEOut") {
document.querySelector('.mapOverlay').style.display = "none";
}
})
})
.wrapper2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container3 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: 100%;
height: auto;
margin: 0 30px 0 30px;
border: 1px solid rgb(116,143,168);
}
.countries {
width: 300px;
height: 20px;
}
.btn {
width: 50px;
height: 50px;
font-size: 1rem;
outline: 'none';
border: 1px solid rgb(116,168);
color: rgb(96,121,145);
cursor: pointer;
}
.Box {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.btns {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20%;
}
.prevBtn {
position: absolute;
top: 39%;
left: -24px;
}
.nextBtn {
position: absolute;
top: 39%;
right: -24px
}
.infoBox {
margin: 30px 20px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
width:71%;
height: auto;
}
.information {
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 100%;
height: auto;
}
.mapOverlay {
display: none;
align-items: center;
justify-content: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
border: 1px solid red;
}
.mapPopup {
width: 200px;
height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class="wrapper2">
<div class="container3">
<div class="countries">
</div>
<div class="Box">
<div class="mapOverlay"></div>
<div class="btns">
<button id="prev" class="btn prevBtn">prev</button>
</div>
<div class="btns">
<button id="next" class="btn nextBtn">next</button>
</div>
</div>
<div class="infoBox">
<div class="information"></div>
<div class="map"></div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)