CSS不透明轉換爲切換隱藏元素

Question

我在這個特定的過渡和我的網站的一般特殊領域有很多麻煩。

我試圖過渡「#desk」元素的不透明度，所以當你點擊「我的個人資料」時，它會淡入。父元素應該開始隱藏，所以它只顯示「showme」焦點。我知道你不能轉換「顯示」，雖然我看過的教程能夠實現隱藏元素和不透明度淡入淡出，所以我不知道我在做什麼錯誤。

我已經能夠通過一些調整來轉換，但我失去了切換顯示/隱藏方面，我想保留。我也遇到了切換本身的問題，因爲點擊時它會移動頁面中的其他元素。

如果任何人都可以幫助，我會非常感激，即使只是粗略的想法，如果事實證明有太多事情要做，

.darea { 
 
    position:relative; 
 
    margin:0 auto; 
 
    width:100%; 
 
    text-align:center; 
 
    font-size:10pt; 
 
} 
 

 
.dtitle { 
 
    margin-top:50px; 
 
    margin-bottom:50px; 
 
    color:#535353; 
 
    font-family:'Lato'; 
 
} 
 

 
.text-cent { 
 
    text-align:center; 
 
} 
 

 
.dtitle h2 { 
 
    margin-bottom:0px; 
 
    text-transform:uppercase; 
 
    letter-spacing:2px; 
 
    font-weight:normal; 
 
    color:#57BC90; 
 
} 
 

 
.half-txt { 
 
    width:50%; 
 
    margin:0 auto; 
 
    display:inline-block; 
 
    line-height:25px; 
 
} 
 

 
.member, .member .dimg { 
 
    width:400px; 
 
    padding-bottom:20px; 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
.dposition { 
 
    text-align:center; 
 
} 
 

 
.showme, a { 
 
    text-decoration:none; 
 
} 
 

 
.showme:focus + #desk {display:block;} 
 

 
#desk { 
 
    display:none; 
 
} 
 

 
#dtext { 
 
    opacity:0; 
 
} 
 

 
.showme:focus ~ #dtext {opacity:1;} 
 

 
.trans { 
 
    -webkit-transition: all 10s; 
 
-moz-transition: all 10s; 
 
-o-transition: all 10s; 
 
transition: all 10s; 
 
} 
 

 
.dposition { 
 
    letter-spacing:2px; 
 
    width:100%; 
 
} 
 

 
.dposition h5 { 
 
    text-transform:uppercase; 
 
    color:#535353; 
 
} 
 

 
.dposition span { 
 
    font-size:10px; 
 
    text-transform:uppercase; 
 
    letter-spacing:1px; 
 
}

<div class="darea"> 
 
<div class="member"> 
 
    <div class="dimg"> 
 
    <img src="images/profile_1.png" alt="director1" height="200" width="200" class="img-responsive"> 
 
    </div> 
 

 
    <a href="#" class="showme">My Profile</a> 
 
    <div id="desk"> 
 
     <p id="dtext"class="trans">Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum. 
 
</p> 
 
    </div> 
 
     
 
    <div class="dposition"> 
 
     <h5>Lorem</h5> 
 
     <span>Director &amp; Director</span> 
 
    </div> 
 
</div> 
 

 
<!---Member 2--> 
 

 

 
<div class="member"> 
 
    <div class="dimg"> 
 
    <img src="images/profile_1.png" alt="director1" height="200" width="200" class="img-responsive"> 
 
    </div> 
 

 
    <a href="#" class="showme">My Profile</a> 
 
    <div id="desk"> 
 
     <p>Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum 
 
</p> 
 
    </div> 
 
     
 
    <div class="dposition"> 
 
     <h5>Lorem</h5> 
 
     <span>Director &amp; Director</span> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

https://jsfiddle.net/v1fyvxyw/〜檢查此琴

.showme:focus + #desk { 
opacity:1; 
visibility:visible; 
position:relative; 
} 

#desk { 
    visibility:hidden; 
opacity:0; 
position: absolute; 
}