CSS不適用於其中一個按鈕

爲什麼當按下第一個按鈕時，第二個按鈕將不透明。但是當按下第二個按鈕時，第一個按鈕會得到不透明度？CSS不適用於其中一個按鈕

當按下第一個按鈕時，可以在關閉彈出窗口時按下第二個按鈕。

非常感謝大家的幫助！

<style> 
body { 
background-color:#121212; 
} 


.one { 
color: #DEDEDE; 
font-size: 65px; 
text-decoration: none; 
text-align: center; 
width: 80px; 
height:0; 
padding-bottom: 80px; 
border-radius: 80px; 
border:3px solid #cfdcec; 
overflow:hidden; 
float:left; 
position:absolute; 
transition: .5s ease; 
top: 180px; 
left: 140px; 
text-align: center; 
text-vertical-align: middle; 
} 


.two { 
color: #DEDEDE; 
font-size: 65px; 
text-decoration: none; 
text-align: center; 
width: 80px; 
height:0; 
padding-bottom: 80px; 
border-radius: 80px; 
border:3px solid #cfdcec; 
overflow:hidden; 
float:left; 
position:absolute; 
transition: .5s ease; 
top: 180px; 
left: 240px; 
text-align: center; 
text-vertical-align: middle; 
} 

.overlay { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
background: rgba(0, 0, 0, 0.8);; 
transition: opacity 500ms; 
visibility: hidden; 
opacity: 0; 
} 

.overlay:target { 
visibility: visible; 
opacity: 1; 
} 

.popup { 
margin: 70px auto; 
padding: 20px; 
background: #fff; 
border-radius: 5px; 
width: 30%; 
position: relative; 
transition: all 5s ease-in-out; 
} 

.popup h2 { 
margin-top: 0; 
color: #333; 
font-family: Tahoma, Arial, sans-serif; 
} 

.popup .close { 
position: absolute; 
top: 20px; 
right: 30px; 
transition: all 200ms; 
font-size: 30px; 
font-weight: bold; 
text-decoration: none; 
color: #333; 
} 

.popup .close:hover { 
color: orange; 
} 

.popup .content { 
max-height: 30%; 
overflow: auto; 
} 

</style> 
</head> 
<body> 

<a class="one" href="#popup1">1</a> 
<div id="popup1" class="overlay"> 
<div class="popup"> 
    <h2>Here i am</h2> 
    <a class="close" href="#">×</a> 
    <div class="content"> 
     1 
    </div> 
</div> 
</div> 

<a class="two" href="#popup2">2</a> 
<div id="popup2" class="overlay"> 
<div class="popup"> 
    <h2>Here i am</h2> 
    <a class="close" href="#">×</a> 
    <div class="content"> 
     2 
    </div> 
</div> 
</div> 

</body> 
</html>

來源

2015-10-11 ValerieH

如果添加CSS的標記，以便人們可以找到你的問題更容易 – cuadraman

使用javascript，您可以切換超鏈接的z索引。

我認爲這是一個可能性：

<html> 
<head> 
<style> 
body { 
    background-color:#121212; 
} 

.one { 
    color: #DEDEDE; 
    font-size: 65px; 
    text-decoration: none; 
    text-align: center; 
    width: 80px; 
    height:0; 
    padding-bottom: 80px; 
    border-radius: 80px; 
    border:3px solid #cfdcec; 
    overflow:hidden; 
    float:left; 
    position:absolute; 

    top: 180px; 
    left: 140px; 
    text-align: center; 
    text-vertical-align: middle; 
} 


.two { 
    color: #DEDEDE; 
    font-size: 65px; 
    text-decoration: none; 
    text-align: center; 
    width: 80px; 
    height:0; 
    padding-bottom: 80px; 
    border-radius: 80px; 
    border:3px solid #cfdcec; 
    overflow:hidden; 
    float:left; 
    position:absolute; 

    top: 180px; 
    left: 240px; 
    text-align: center; 
    text-vertical-align: middle; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.8);; 
    transition: opacity 500ms; 
    visibility: hidden; 
    opacity: 0; 
    z-index:0; 
} 

.overlay:target { 
    visibility: visible; 
    opacity: 1; 
} 

.popup { 
    margin: 70px auto; 
    padding: 20px; 
    background: #fff; 
    border-radius: 5px; 
    width: 30%; 
    position: relative; 
    transition: all 5s ease-in-out; 
} 

.popup h2 { 
    margin-top: 0; 
    color: #333; 
    font-family: Tahoma, Arial, sans-serif; 
} 

.popup .close { 
    position: absolute; 
    top: 20px; 
    right: 30px; 
    transition: all 200ms; 
    font-size: 30px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #333; 
} 

.popup .close:hover { 
    color: orange; 
} 

.popup .content { 
    max-height: 30%; 
    overflow: auto; 
} 

</style> 
</head> 
<body> 
<a class="one" id="one" href="#popup1" onclick="changeZIndex(this)">1</a> 
<div id="popup1" class="overlay"> 
    <div class="popup"> 
     <h2>Here i am</h2> 
     <a class="close" href="#">×</a> 
     <div class="content"> 
      1 
     </div> 
    </div> 
</div> 
<a class="two" id="two" href="#popup2" onclick="changeZIndex(this)">2</a> 
<div id="popup2" class="overlay"> 
    <div class="popup"> 
     <h2>Here i am</h2> 
     <a class="close" href="#">×</a> 
     <div class="content"> 
      2 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    function changeZIndex(elm) { 
     if (elm.className == "one") { 
      document.getElementById('one').style.zIndex = -1; 
      document.getElementById('two').style.zIndex = 1; 
     } 
     if (elm.className == "two") { 
      document.getElementById('one').style.zIndex = 1; 
      document.getElementById('two').style.zIndex = -1; 
     } 
    } 
</script> 
</body> 
</html>

來源

2015-10-11 19:50:19

謝謝你的幫助！但我實際上希望這兩個按鈕在單擊其中一個按鈕時獲取不透明度。 – ValerieH

感謝它幫助!!!! – ValerieH

原因透明度的問題（實際上它不是一個透明度的問題與按鈕，但彈出的疊加。如果你分析它深深的存在與不透明度沒有問題）是html元素訂單/堆棧。當你點擊第一個按鈕時，彈出的popup1被放置在html上的第一個按鈕之後，因此第一個按鈕被overlay覆蓋。所以它看起來像一些不透明的應用在按鈕上。但是當你點擊第二個按鈕時，彈出的popup2位於所有元素之上，因此第一個和第二個按鈕被overlay覆蓋。

您正在使用:target僞選擇器來打開彈出窗口。一次只有一個目標（url上的一個哈希標記）是可能的。所以你無法一次打開兩個。

對於第一個問題，您可以使用`z-index'做一些技巧。但我不認爲你可以解決沒有JavaScript的第二個問題。

來源

2015-10-11 19:43:06 Kesavan

謝謝你的幫助Kesavan這將是有益的！什麼Java代碼可以解決這個問題？ – ValerieH

CSS不適用於其中一個按鈕

回答

相關問題