다양한 오버레이 ID를 처리하는 방법: 동일한 JavaScript 함수 사용
<p>다른 링크에 대한 오버레이를 표시하고 싶습니다. 첫 번째 오버레이에는 이미지와 텍스트가 포함되어 있으며, 링크 2를 클릭하면 구조는 동일하지만 콘텐츠가 다른 오버레이 2가 표시되어야 합니다. 원하는 결과를 얻을 수 있도록 도와주세요. </p>
<p>
<pre class="brush:js;toolbar:false;">function on() {
document.getElementById("overlay").style.display = "차단";
}
함수 on1() {
document.getElementById("overlay1").style.display = "차단";
}
기능 끄기() {
document.getElementById("overlay").style.display = "none";
}</pre>
<pre class="brush:css;toolbar:false;">.img {
전환: 5s easy-in-out 변환;
변환: scale(1);
변환 원점: 0 0;
}
.img:호버 {
변환: 스케일(1.25)
}
#씌우다,
#오버레이1 {
위치: 고정;
디스플레이: 없음;
너비: 100%;
높이: 100%;
상단: 0;
왼쪽: 0;
오른쪽: 0;
하단: 0;
배경색: 흰색;
Z-색인: 77777772;
커서: 포인터;
}
#텍스트,
#텍스트 1 {
위치: 고정;
최고: 20%;
왼쪽: 5%;
//글꼴 크기: 50px;
검정색;
// 변환: 번역(-50%,-50%);
// -ms-변환: 번역(-50%,-50%);
}</pre>
<pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()">
<div id="텍스트">
<div style="너비: 48%; 부동:왼쪽">
