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;
}

切换隐藏元素

1 个答案: