為什么單擊時背景中的圖像會發光？

Question

當我單擊彈出框的 <a> 標記時，背景中的圖像（具有疊加效果）會發光，我不知道為什么。 如果有人知道我在這里寫代碼。 謝謝你。

如您所見，我在第一個 <a> 標記中將 href 設置為 #popup1，它會打開彈出框，但在背景中您可以看到發光的圖像和邊框。 我已經更改了顯示標簽和其他 css 標簽，但什么也沒有。

這是[CODEPEN] https://codepen.io/elteoz/pen/xxJVPvp

Answer 1

這取決於您的 HTML 元素的順序。 這個例子將解決這個問題

 .container1 { display: flex; width: 100%; flex-wrap: wrap; margin-top: 110px; align-content: space-around; justify-content: center; transition: all 0.2s linear; }.container1 > div { padding: 40px; justify-content: center; } *, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }.main-title { color: #2d2d2d; text-align: center; text-transform: capitalize; padding: 0.7em 0; }.container { padding: 1em 0; float: left; width: 50%; } @media screen and (max-width: 640px) {.container { display: block; width: 100%; } } @media screen and (min-width: 900px) {.container { width: 33.33333%; } }.container.title { color: #1a1a1a; font-family: 'Roboto', sans-serif; text-align: center; margin-bottom: 10px; }.content { position: relative; width: 100%; max-width: 400px; height: 100%; margin: auto; overflow: hidden; transition: transform 0.4s; }.content.content-overlay { /* background: rgba(70,34,0);*/ background: rgba(214, 142, 60, 70%); /* background: rgb(214,142,60);*/ position: absolute; height: 97%; width: 100%; left: 30px; top: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }.content:hover.content-overlay { opacity: 0.5; }.content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }.content:hover.content-details { top: 50%; left: 50%; right: 50%; opacity: 1; }.content-details h3 { color: #fff; font-weight: 500; text-align: center; letter-spacing: 0.15em; margin-bottom: 0.5em; padding-left: 20px; text-transform: uppercase; }.content-details p { color: #fff; font-size: 0.8em; text-align: center; padding-left: 20px; }.fadeIn-bottom { top: 80%; }.fadeIn-top { top: 20%; }.fadeIn-left { left: 20%; }.fadeIn-right { left: 80%; } h1 { font-size: 3em; text-align: center; color: #00898e; margin: 0; padding: 30vh 0 1em; } h2 { text-align: center; white-space: nowrap; color: #00898e; } a { text-decoration: none; color: #fff; } p { text-align: left; }.btn { display: inline-block; padding: 10px 20px; border: 2px solid #00898e; border-radius: 10px; transition: background 0.3s; }.btn:hover { background: #00898e; }.popup { position: fixed; padding: 10px; max-width: 500px; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.9); visibility: hidden; opacity: 0; /* "delay" the visibility transition */ -webkit-transition: opacity 0.5s, visibility 0s linear 0.5s; transition: opacity 0.5s, visibility 0s linear 0.5s; z-index: 1; }.popup:target { visibility: visible; opacity: 1; /* cancel visibility transition delay */ -webkit-transition-delay: 0s; transition-delay: 0s; }.popup-close { position: absolute; padding: 10px; max-width: 500px; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.9); }.popup.close { position: absolute; right: 5px; top: 5px; padding: 5px; color: #000; transition: color 0.3s; font-size: 2em; line-height: 0.6em; font-weight: bold; }.popup.close:hover { color: #00e5ee; }.close-popup { background: rgba(0, 0, 0, 0.7); cursor: default; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; /* "delay" the visibility transition */ -webkit-transition: opacity 0.5s, visibility 0s linear 0.5s; transition: opacity 0.5s, visibility 0s linear 0.5s; }.popup:target +.close-popup { opacity: 1; visibility: visible; /* cancel visibility transition delay */ -webkit-transition-delay: 0s; transition-delay: 0s; }

 <div class="container1" style="cursor: default"> <div class="container2"> <div class="content"> <a id="ant" href="#popup1" onclick="show('popup2')"> <div class="content-overlay"></div> <img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="z-index: 0; height: 200px; width: 330px; border: 2px solid rgb(205, 144, 76); padding: 0" /> <div class="content-details fadeIn-bottom" style="background-size: cover"> <h3 class="content-title" style="font-family: 'Roboto', sans-serif">ANTIPASTI</h3> <p class="content-text"></p> </div> </a> </div> </div> <div class="container2"> <div class="content"> <a id="prim"> <div class="content-overlay"></div> <img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="border: 2px solid rgb(205, 144, 76); padding: 0; height: 200px; width: 330px" /> <div class="content-details fadeIn-bottom"> <h3 class="content-title" style="font-family: 'Roboto', sans-serif">PRIMI PIATTI</h3> <p class="content-text"></p> </div> </a> </div> </div> <;-- The popup should be entered as the last element so that it overlays the other elements --> <div id="popup1" class="popup"> <a href="#ant" class="close">&times;</a> <h2>The Popup Has Arrived</h2> <p>QUESTI SONO GLI ANTIPASTI</p> </div> <a href="#ant" class="close-popup"></a> </div>

Answer 2

問題實際上是您在容器 2 之前添加了彈出窗口，這就是它發光的原因。 所以，如果你不想讓它發光，就像這樣在兩個容器之后添加你的彈出部分。 不要更改您的 Css。您只需要像這樣更改 position

<div class="container1" style="cursor:default;">
            <div class="container2">
              <div class="content">
                <a id="ant" href="#popup1" onclick="show('popup2')">
                  <div class="content-overlay"></div>
                  <img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="z-index: 0;height: 200px;width: 330px;border:2px solid rgb(205,144,76);padding:0;">
                  <div class="content-details fadeIn-bottom" style="background-size:cover;">
                    <h3 class="content-title" style="font-family: 'Roboto', sans-serif;">ANTIPASTI</h3>
                    <p class="content-text"></p>
                  </div>
                </a>
              </div>
            </div>




        
            <div class="container2">
                <div class="content">
                    <a id="prim">
                        <div class="content-overlay"></div>
                        <img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="border:2px solid rgb(205,144,76);padding:0; height:200px; width:330px;">
                        <div class="content-details fadeIn-bottom">
                            <h3 class="content-title" style="font-family: 'Roboto', sans-serif;"> PRIMI PIATTI </h3>
                            <p class="content-text"></p>
                        </div>
                    </a>
                </div> 
            </div>
        </div>
<div id="popup1" class="popup">
              <a href="#ant" class="close">&times;</a>
              <h2>The Popup Has Arrived</h2>
              <p>QUESTI SONO GLI ANTIPASTI</p>
            </div>
            <a href="#ant" class="close-popup"></a