title: Change color of an element only when another one is on hover
body: <p>hi i have a list of 5 p elements, they have teal background and i want that
  when i hover the second element, the second itself and the fourth, will change the text color to orange. and go back to the normal color when the second is not on hover.</p>
  
  <pre><code>&lt;p id="t1"&gt; test 1 &lt;/p&gt;
  &lt;p id="t2"&gt; test 2 &lt;/p&gt;
  &lt;p id="t3"&gt; test 3 &lt;/p&gt;
  &lt;p id="t4"&gt; test 4 &lt;/p&gt;
  &lt;p id="t5"&gt; test 5 &lt;/p&gt;
  
  p {
      background-color: teal;
      width: 100px;
  }
  
  p#t1:hover {
    color: yellow;
  }
  
  
  $(document).ready(
    function() {
      $("p#t2").hover(
        function() {
          $("p#t2").style("color", "orange");
          $("p#t4").style("color", "orange");
        },
        function() {
          $("p#t2").style("color", "black");
          $("p#t4").style("color", "black");
        }
      );
    });
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/jPOgPG" rel="nofollow">http://codepen.io/anon/pen/jPOgPG</a></p>
  
  <p>this is my code... 
  what's wrong?</p>