title: I need a little clarification on dynamically setting a hover BG
body: <p>Here is my code:</p>
  
  <pre><code>function recordStarted() {
  $("#red_button").css("background","url(stop.png)");
  $("#red_button").css("background-repeat","no-repeat");
  
  $("#red_button:hover").css("background","url(stop-hover.png)");
  $("#red_button:hover").css("background-repeat","no-repeat");
  }
  </code></pre>
  
  <p>I have the background of the div layer being set by the second line, but when I try to set the hover background, it just becomes the background. How would I go about setting the :hover background dynamically?</p>
  
  <p>CSS:</p>
  
  <pre><code>.red_button 
  {
  background:url(record.png);
  padding: 19px 251px;
  cursor: pointer;
  background-repeat: no-repeat;
  }
  
  .red_button:hover 
  {
  background:url(record-hover.png);
  cursor: pointer;
  background-repeat: no-repeat;
  }
  </code></pre>