title: CSS: Hover a div, action another div
body: <p>Need to hover a div then action on another div, but the action DIVs is on top of the Hover Div, any idea to make this happen?</p>
  
  <p>Thank you</p>
  
  <p>Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
    display: block;
    padding: 8px 10px;
    border: 1px solid red;
    max-width: 20%;
  }
  
  .hover:hover ~ .action{
    background: yellow;
  }
  
  
  .hover1:hover ~ .action1{
    background: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--This one can --&gt;
  &lt;a href="#" class="hover1"&gt;Hover&lt;/a&gt;
  &lt;a href="#" class="action1"&gt;Action&lt;/a&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  
  &lt;!-- But this one cannot, i need this--&gt;
  &lt;a href="#" class="action"&gt;Need This to be action&lt;/a&gt;
  &lt;a href="#" class="hover"&gt;When Hover This&lt;/a&gt;
  
  &lt;br&gt;&lt;br&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Codepen link: <a href="https://codepen.io/YSLee/pen/OQNadN" rel="nofollow noreferrer">https://codepen.io/YSLee/pen/OQNadN</a></p>