多个悬停替换

Question

我正在制作CSS按钮，现在我正在关注一个问题。

我有以下的CSS：

.proceed { 
    width: 135px; 
    height: 38px; 
    position: relative; 
    cursor: pointer; 
} 

.proceedText { 
    position: relative; 
    margin: 0 auto; 
    max-width: 106px; 
    height: 29px; 
    padding-top: 10px; 
    opacity: 1; 
    transition: 0.7s ease-in-out; 
    -webkit-transition: 0.7s ease-in-out; 
    -moz-transition: 0.7s ease-in-out; 
    -o-transition: 0.7s ease-in-out; 
    -ms-transition: 0.7s ease-in-out; 
} 

#proceedButton { 
    background: rgba(0, 0, 0, 0.5); 
    width: 100%; 
    height: 100%; 
    border: 1px solid rgba(0, 0, 0, 0.6); 
} 

#proceedLight { 
    background: rgba(255, 255, 255, 0.06); 
    width: 100%; 
    height: 20px; 
    position: absolute; 
} 

而继成HTML：

  <div class="proceed"> 
       <a onClick="startGateway('137340');"> 
        <div id="proceedButton"> 
         <div id="proceedLight"></div> 
         <h1 class="proceedText">Click to Proceed</h1> 
        </div> 
       </a> 
      </div> 

我想做的事情，当我有问题是以下什么...

我想做一些悬停效果，但是让每个元素悬停都不会给我想要的效果，因为只有当光标位于“元素”上方时，它才会悬停。

我想让悬停在.proceed上影响所有其他元素。所以，当光标结束“.proceed”它会做下面的事情。

.proceedText:hover { 
    opacity: 0.5; 
} 

#proceedLight:hover { 
    bottom: 0; 
} 

任何解决方案？导致使每个元素悬停，并不是真的按我的意愿工作。

Answer 1

需要把悬停在.proceed，我认为这将工作。 如果不尝试使用jQuery来改变dom和效果。

.proceed:hover .proceedText {opacity: 0.5;} 
.proceed:hover #proceedLight{bottom: 0;} 

修订。 我认为jquery，就像上面的评论一样，是最好的解决方案。