title: Change an element css while hovering on another element in css?
body: <p>Is there any way to change an element's css while focusing or hovering on one of it's children?  </p>
  
  <p>Ex: while I move my mouse on A, B's background color changes.
  if B is a descendant A, it is possible.</p>
  
  <p>--A<br>
  -----B</p>
  
  <p>using <code>#A:hover #B { background-color: blue }</code> </p>
  
  <p><strong><a href="http://codepen.io/anon/pen/lpaHB" rel="nofollow">DEMO</a></strong></p>
  
  <hr>
  
  <p>in sibling: </p>
  
  <p>---A<br>
  ---B</p>
  
  <p>It is : <code>#A:hover ~ #B { background-color: blue; }</code></p>
  
  <p><strong><a href="http://codepen.io/anon/pen/KJDhy" rel="nofollow">DEMO</a></strong></p>
  
  <hr>
  
  <p>assume B is a descendant of A.<br>
  <strong>what if I want to change #A background, while I am hovering on B. how could it be?</strong></p>
  
  <p>--A<br>
  -----B</p>