title: Change state of one div based on hovering list item within a sibling div
body: <p>How to influence on element depending on sibling's child state?</p>
  <pre><code>&lt;div class=&quot;root&quot;&gt;
      
      &lt;div class=&quot;menu&quot;&gt;
          &lt;ul&gt;
              &lt;li&gt;...&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;main&quot;&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Smth like this but it doesn't work:</p>
  <pre><code>.menu li:hover ~ .main {
    /* change &quot;main&quot; if some &lt;li&gt; is hover */
  }
  </code></pre>