title: Multiple Hover replacements
body: <p>I am making an CSS button and I am focusing a problem right now.</p>
  
  <p>I have following in CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>And following into HTML:</p>
  
  <pre><code>            &lt;div class="proceed"&gt;
                  &lt;a onClick="startGateway('137340');"&gt;
                      &lt;div id="proceedButton"&gt;
                          &lt;div id="proceedLight"&gt;&lt;/div&gt;
                          &lt;h1 class="proceedText"&gt;Click to Proceed&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do, when I have problem is following...</p>
  
  <p>I want to make a couple of hover effects but making each element on hover doesnt give me exactly effect that I want because it will hover only when my cursor is over the "element".</p>
  
  <p>I want to make hover on the .proceed to affect on all other elements. So when cursor is over ".proceed" it would do following.</p>
  
  <pre><code>.proceedText:hover {
      opacity: 0.5;
  }
  
  #proceedLight:hover {
      bottom: 0;
  }
  </code></pre>
  
  <p>Any solutions ? cause making each element on hover, doesnt really works as I want.</p>