时间戳

首页 > 解决方案 > Mouseover/mouseout 事件只能在本地正常工作，而不是在推送到 gitHub 页面或部署在 Netlify 上时

javascript - Mouseover/mouseout 事件只能在本地正常工作，而不是在推送到 gitHub 页面或部署在 Netlify 上时

问题描述

我创建了一个图像轮播，显示带有附加信息的图像。都是动态生成的。将鼠标悬停在其他动态创建的图像（拇指）上时，我希望显示该图像的更大版本。在本地，叠加层显示了我想要的方式，并带有更大的图像。它是屏幕中央较大图像的叠加。但是，当部署（gh-pages 或 netlify）时，鼠标悬停事件仅在第二次尝试时有效。第一次只显示一秒钟，隐藏在其他元素后面然后消失？或者它闪烁开/关。

覆盖 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",
        currency: "Euro (€)",
        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, 143, 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>

标签： javascriptaddeventlistenermouseovermouseout

解决方案

推荐阅读