title: element:hover effectedElement {...} not doing anything
body: <p>I have two divs. A paragraph tag sits in each div, containing some text. The code looks a little something like this:</p>
  
  <pre><code>&lt;div id="box1"&gt;
    &lt;p id="text1"&gt;Hi!&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="box2"&gt;
    &lt;p id="text2"&gt;Bye!&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Some CSS like this works fine:</p>
  
  <pre><code>#box1:hover #text1 {
    color:blue;
  }
  </code></pre>
  
  <p>However, when I try to effect an element in box2 using an element in box1, it doesn't work. Something like this, for example:</p>
  
  <pre><code>#text1:hover #text2 {
    color:blue;
  }
  </code></pre>
  
  <p>Where might I be going wrong?</p>
  
  <p>Thank you.</p>
  
  <p>EDIT:</p>
  
  <p>The real-world code I'm working with:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="pageContents"&gt;
              &lt;div id="header"&gt;
  
                  &lt;div id="hBox"&gt;
                      &lt;span id="pageTitle_1"&gt;FIRSTNAME&lt;br&gt;LASTNAME&lt;/span&gt;
                      &lt;div id="slider1"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div id="pBox"&gt;
                      &lt;span id="projects"&gt;PAST&lt;br&gt;PROJECTS&lt;/span&gt;
                      &lt;div id="slider2"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#pBox:hover + #hBox &gt; #pageTitle_1 {
    color:#636363;
  }
  </code></pre>