title: Revert to original CSS state in jQuery?
body: <p>I'm looking for a way to get my jQuery code to, when I hover over one of my elements (.pdf), change the font color of another element (.dl) to blue, and then when I stop hovering over my first element (.pdf) the second element goes back to its original color.</p>
  <p>I managed to get this to work, but I also have to have another jQuery code which when I hover over the second element (.dl), my first element (.pdf) goes blue, and then returns to its original state when the hover ends on my second element (.dl).</p>
  <p>The issue I'm having is when I load the page, if I hover over my first element (.pdf), (.dl) becomes blue and when I stop hovering it returns to white, but when I hover over (.dl) after adding the jQuery that does the .pdf hover, (.dl) stays white!</p>
  <p>Here is my jQuery:</p>
  <pre><code>$(document).ready(function () {
  $(&quot;.pdf&quot;).hover(function (f) {
          $(&quot;.dl a&quot;).css('color', '#33b5e5');
      },
      function (f) {
          $(&quot;.dl a&quot;).css('color', '#fff');
      });
  });
  
  $(document).ready(function () {
  $(&quot;.dl&quot;).hover(function (g) {
          $(&quot;.pdfasdf&quot;).show();
          (&quot;.dl&quot;).show();
      },
      function (g) {
          $(&quot;.pdfasdf&quot;).hide();
          (&quot;.dl&quot;).hide();
      });
  });
  </code></pre>
  <p>(bit messy, sorry! I'm new!)</p>
  <p>and the relevant CSS in my jfiddle:
  <a href="http://jsfiddle.net/48bQN/" rel="nofollow noreferrer">jsfiddle</a></p>
  <p>I basically just need to know if there's a way to revert to the original CSS state in jQuery. I believe the (.dl a:hover) is being overridden by the jQuery that tells it to become white when not hovering over .pdf.</p>
  <p><strong>Edit</strong> I was able to get it to work by adding an <code>!important</code> after my .dl a:hover font color in my CSS, but I'd still like to know if there's a jQuery way to do this, as my way is quite sloppy.</p>