多個懸停替換

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，就像上面的評論一樣，是最好的解決方案。