title: CSS hover over one paragraph, change background of the previous one
body: <p>For practice and training CSS im trying to do something like:
  <img src="https://i.stack.imgur.com/SsJT9.jpg" alt="enter image description here"></p>
  
  <p>In other words, I'm trying something like this: when I hover over third paragraph, second paragraph needs to get color like on picture.</p>
  
  <p>I'm trying with pseudo-classes <code>:hover</code> and <code>:before</code> (or <code>:after</code>) with <code>content</code> attribute set to <code>""</code>, setting <code>background</code> to <code>#E7A51B</code> and <code>opacity</code> to <code>0.3</code> but It doesn't work.</p>
  
  <p>HTML need to be like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="app"&gt;
          &lt;p&gt; First paragraph &lt;/p&gt;
          &lt;div class="active"&gt;
              &lt;p&gt; Second paragraph &lt;/p&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div&gt;
              &lt;p&gt; Third paragraph &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p>EDIT: Thanks everyone on comments. Reading your comments I get idea to ask that is it possible some more generic approach, something like:<br>
  If I hover over element with <code>class="foo1"</code> background of element with <code>class="foo2"</code> get changed?</p>