title: How to apply a CSS class on hover to dynamically generated submit buttons?
body: <p>I have the following piece of HTML/CSS code which is used to display pages based on the number of rows retrieved from a database.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.paginate {
      font-family:Arial,Helvetica,sans-serif;
      padding:3px;
      margin:3px;
  }
  
  .disableCurrentPage {
      font-weight:bold;
      background-color:#999;color:#FFF; 
      border:1px solid #999;
      text-decoration:none;color:#FFF;
      font-weight:bold;
  }
  
  .paging {
      cursor: pointer; 
      background-color: transparent;border:1px solid #999;
      text-decoration:none;
      color:#9CC;
      font-weight:bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='paginate'&gt;
      &lt;input type="submit" name="btnFirst" value="First" 
             class="disableCurrentPage" disabled="disabled"/&gt;
      &lt;input type="submit" name="btnPrev" value="Previous" class="paging"/&gt;
          
      &lt;input type="submit" name="btnPage" value="1"
             class="disableCurrentPage" disabled="disabled"/&gt;
      &lt;input type="submit" name="btnPage" value="2" class="paging"/&gt;
      &lt;input type="submit" name="btnPage" value="3" class="paging"/&gt;
      &lt;input type="submit" name="btnPage" value="4" class="paging"/&gt;
      &lt;input type="submit" name="btnPage" value="5" class="paging"/&gt;
      &lt;input type="submit" name="btnPage" value="6" class="paging"/&gt;
      &lt;input type="submit" name="btnPage" value="7" class="paging"/&gt;
      &lt;input type="submit" name="btnPage" value="8" class="paging"/&gt;
      &lt;input type="submit" name="btnPage" value="9" class="paging"/&gt;
      &lt;input type="submit" name="btnPage" value="10" class="paging"/&gt;
          
      &lt;input type="submit" name="btnNext" value="Next" class="paging"/&gt;
      &lt;input type="submit" name="btnLast" value="Last" class="paging"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Upto this there is no question. I want to apply the CSS class something like the following to all of those buttons on mouse hover.</p>
  
  <pre class="lang-css prettyprint-override"><code>.button:hover {
      border:1px solid #999;
      color:#000;
  }
  </code></pre>
  
  <p>Those buttons with the name attribute <code>btnPage</code> are generated <strong>dynamically</strong> in a loop. Therefore, I think it is inconvenient to apply the preceding CSS class based on the <code>id</code> attribute. </p>
  
  <p>So, how can this class be applied to those buttons on hover?</p>