CSS过渡效果向上高度无效

Question

已编辑 JSFIDDLE

当悬停按钮时，显示向上的过渡高度的目标，但是CSS .btn-position:hover ~ .bg-transit { height: 430px !important;}的这一行似乎是向下扩展而不是向上扩展。有没有办法向上转换？

我不想在其中添加任何JS。

HTML

<div class="career-wrapper-positions">
  <div class="section-positions">
    <div class="position-wrap">
        <div class="position-box" id="video_interpreter">
            <div class="employees"><img src="http://staging.svrs.com/assets/images/careers2018/position-lady1-1.png" alt="SVRS | Video Interpreter positions"></div>
            <div class="position-tited-top-bg"></div>
            <div class="position-box-info">
                <div class="position-header"><h5 class="h5-careers18">CUSTOMER SERVICES</h5></div>
                <div class="position-subheader" id="subheader1">positions</div>
                <div class="position-p">Individually, passionate about the work. Collectively, the largest sales workforce in the world.</div>
                <div class="btn-position">
                    <button onclick="location.href='#'" class="position-btn" id="btn1-position">Apply now</button></div>
                <div class="bg-transit"></div>
           </div>
        </div>
     </div>
  </div>

CSS

.section-positions { margin: 0 auto; width: 100%; }
.position-header { text-align: center; }
.position-header p { margin-top: 0; }
.position-wrap { height: 525px; position: absolute; z-index: 10; width: 100%; text-align: center; display: flex;  margin-top: 175px; }
.position-box {  width: 209px !important; height: 330px; display: block;  margin: 20px; background-color: #231f20; z-index: 2;}
.position-tited-top-bg { width: 209px !important;  height: 20px; background-color: #231f20; -webkit-transform: skew(0deg, 2deg); transform: skew(0deg, 2deg); margin-top: -15px; position: relative;z-index: -2;  }
.position-header { height: 15px;color:#ffbb11; font-size: 22px; font-family:'Source Sans Pro', sans-serif; font-weight: 400; }
.position-subheader { color: #ffbb11; margin-top: 10px; font-family:'Source Sans Pro', sans-serif;}
.position-p { color: #fff; padding: 0 10px 0 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px; margin-top: 10px; line-height: 20px; }
.position-btn { background-color: #ffbb11; width: 150px; height: 41px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 50px;  }
.position-box-info {  padding-top: 10px;  }

/* this is the button to trigger a new height size transition of the background box  */
.bg-transit {  width: 209px !important; height: 338px; display: block;   background-color: #ff0000; z-index: -1; position: relative; top: -280px; transition-property: height;  transition-duration: 0.5s;}
.btn-position:hover ~ .bg-transit { height: 430px !important;}

.position-btn:hover { background-color: #231f20 !important; color: #ffbb11 !important; border: #9c7002 solid 1px; }
.employees { position: absolute; margin-top: -210px; width: 207px; margin-left: 5px; z-index: 9999;}

Answer 1

.position-btn:hover ~ .position-box-info选择.position-box-info之后的所有兄弟姐妹.position-btn:hover。由于.position-box-info实际上是.position-btn元素的父元素，因此不会选择任何内容。实际上，您无法从孩子中选择父母，因此您必须添加带有javascript的类或更改HTML。

此外，您似乎错过了</div>结束标记。