我有一個響應式圖像網格，它運行良好，我很滿意。現在我想向圖像添加懸停效果，以便應用白色半透明濾鏡，并且文本出現在圖像上，并在圖像上顯示更多詳細信息。 我還希望圖像在單擊時成為模式并彈出。似乎當我應用懸停效果時，彈出圖像停止工作。 誰能告訴我出了什么問題嗎？ 注意：我知道懸停效果尚未應用于所有圖像。這是因為當我意識到它不起作用時我并沒有打擾。var modalEle = document.querySelector(".modal");var modalImage = document.querySelector(".modalImage");Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => { item.addEventListener("click", event => { modalEle.style.display = "block"; modalImage.src = event.target.src; });});document.querySelector(".close").addEventListener("click", () => { modalEle.style.display = "none";});<html><body><!--MAIN CONTENT--><main> <div class="row"> <div class="column"> <div class="container"> <img class="ImgThumbnail" src="images/Painting/Oranges in Berlin.jpg" alt=""> <div class="overlay"> <div class="text">caption content</div> </div> </div> <img class="ImgThumbnail" src="images/Painting/Bread Rolls.jpeg" alt=""> <img class="ImgThumbnail" src="images/Painting/the Market.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Life Drawing with card.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs IV.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Carrofs I.JPG" alt=""> <img class="ImgThumbnail" src="images/Painting/The Trig, from memory.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Beacon.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Farm on the Hill.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Across the Road.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Back Lane I.jpg" alt=""> </div><div class="modal"><span class="close">×</span><img class="modalImage" id="img01"></div></main></body></html>
2 回答
收到一只叮咚
TA貢獻1821條經驗 獲得超5個贊
聽起來當光標懸停在圖像上時，懸停狀態本質上是分層的在可點擊圖像元素的頂部，因此阻止用戶點擊它并激活彈出模式。嘗試將偵聽器添加到懸停狀態元素，或者將標題與圖像分組，以便可以單擊它們。我已將您的示例與下面的代碼片段配對。
干杯!
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".overlay")).forEach(item => {
? item.addEventListener("click", event => {
? ? modalEle.style.display = "block";
? ? modalImage.src = event.target.parentNode.querySelector(".ImgThumbnail").src;
? });
});
document.querySelector(".close").addEventListener("click", () => {
? modalEle.style.display = "none";
});
body {
? color: #66704D;
? letter-spacing: 3px;
}
/*overlay*/
.container {
? position: relative;
? width: 300px;
? height: 200px;
}
.ImgThumbnail {
? display: block;
? width: 100%;
? height: auto;
}
.overlay {
? position: absolute;
? top: 0;
? bottom: 0;
? left: 0;
? right: 0;
? height: 100%;
? width: 100%;
? opacity: 0;
? transition: .5s ease;
? background-color: rgba(255, 255, 255, 0.9);
}
.container:hover .overlay {
? opacity: 1;
}
.text {
? color: #66704d;
? font-size: 20px;
? letter-spacing: 5px;
? position: absolute;
? top: 50%;
? left: 50%;
? -webkit-transform: translate(-50%, -50%);
? -ms-transform: translate(-50%, -50%);
? transform: translate(-50%, -50%);
? text-align: center;
}
/*modal*/
.ImgThumbnail {
? cursor: pointer;
? transition: 0.3s;
}
.modal {
? display: none;
? position: fixed;
? z-index: 1;
? padding-top: 100px;
? left: 0;
? top: 0;
? width: 100%;
? height: 100%;
? overflow: auto;
? background-color: rgb(255, 255, 255, 0.85);
}
.modalImage {
? margin: 0 auto;
? display: block;
? width: 80%;
? height: auto;
? max-width: 1024px;
}
.close {
? position: absolute;
? top: 15px;
? right: 35px;
? color: #66704d;
? font-size: 40px;
? font-weight: bold;
? transition: 0.3s;
}
.close:hover,
.close:focus {
? cursor: pointer;
}
@media only screen and (max-width: 700px) {
? .modalImage {
? ? width: 100%;
? }
}
<div class="container">
? <div class="imgGroup">
? ? <img class="ImgThumbnail" src="https://placehold.it/300x200" alt="">
? ? <div class="overlay">
? ? ? <div class="text">caption content</div>
? ? </div>
? </div>
</div>
<div class="modal">
? <span class="close">×</span>
? <img class="modalImage" id="img01">
</div>
qq_笑_17
TA貢獻1818條經驗 獲得超7個贊
查看演示：https://codepen.io/turibamwe/pen/xxwGozx
使用這個JavaScript：
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail + .overlay")).forEach(item => {
var itemImage = item.parentNode.firstElementChild.getAttribute("src");
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = itemImage//event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
- 2 回答
- 0 關注
- 175 瀏覽
添加回答
舉報
0/150
提交
取消