Come applicare una classe CSS al passaggio del mouse sui pulsanti di invio generati dinamicamente?

Question

Ho il seguente codice HTML/CSS che viene utilizzato per visualizzare le pagine in base al numero di righe recuperate da un database.

.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; 
 
}

<div class='paginate'> 
 
    <input type="submit" name="btnFirst" value="First" 
 
      class="disableCurrentPage" disabled="disabled"/> 
 
    <input type="submit" name="btnPrev" value="Previous" class="paging"/> 
 
     
 
    <input type="submit" name="btnPage" value="1" 
 
      class="disableCurrentPage" disabled="disabled"/> 
 
    <input type="submit" name="btnPage" value="2" class="paging"/> 
 
    <input type="submit" name="btnPage" value="3" class="paging"/> 
 
    <input type="submit" name="btnPage" value="4" class="paging"/> 
 
    <input type="submit" name="btnPage" value="5" class="paging"/> 
 
    <input type="submit" name="btnPage" value="6" class="paging"/> 
 
    <input type="submit" name="btnPage" value="7" class="paging"/> 
 
    <input type="submit" name="btnPage" value="8" class="paging"/> 
 
    <input type="submit" name="btnPage" value="9" class="paging"/> 
 
    <input type="submit" name="btnPage" value="10" class="paging"/> 
 
     
 
    <input type="submit" name="btnNext" value="Next" class="paging"/> 
 
    <input type="submit" name="btnLast" value="Last" class="paging"/> 
 
</div>

Fino a questo non c'è dubbio. Voglio applicare la classe CSS qualcosa come il seguente a tutti quei pulsanti al passaggio del mouse.

.button:hover { 
    border:1px solid #999; 
    color:#000; 
} 

Tali pulsanti con l'attributo nome btnPage sono generate dinamicamente in un ciclo. Pertanto, penso che sia scomodo applicare la precedente classe CSS basata sull'attributo id.

Quindi, come si può applicare questa classe a quei pulsanti al passaggio del mouse?

Answer 1

Aggiungere il codice qui sotto

input[type="submit"]:hover { 
    border: 1px solid #999; 
    color: #000; 
} 

Se è necessario solo per questi, pulsante allora si può aggiungere il nome id

#paginate input[type="submit"]:hover { 
    border: 1px solid #999; 
    color: #000; 
} 

DEMO

Answer 2

Hai due opzioni :

1. Estendere la tua definizione .paging classe:

   .paging:hover { 
       border:1px solid #999; 
       color:#000; 
   } 
   

2. utilizzare la gerarchia DOM per applicare lo stile CSS:

   div.paginate input:hover { 
       border:1px solid #999; 
       color:#000; 
   } 
   

Answer 3

Il più efficiente selettore è possibile utilizzare è un attribute selector.

input[name="btnPage"]:hover {/*your css here*/} 

Ecco una demo dal vivo : http://tinkerbin.com/3G6B93Cb