html - texto - efectos para imagenes con bootstrap

¿Cómo aplicar una clase CSS al pasar el cursor por encima de los botones de envío generados dinámicamente?

Question

Tengo el siguiente fragmento de código HTML / CSS que se usa para mostrar páginas en función del número de filas recuperadas de una base de datos.

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

A esto no hay duda. Quiero aplicar la clase CSS algo como lo siguiente a todos esos botones en el cursor del mouse.

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

Esos botones con el atributo de nombre btnPage se generan dinámicamente en un bucle. Por lo tanto, creo que es un inconveniente aplicar la clase CSS precedente basada en el atributo id .

Entonces, ¿cómo se puede aplicar esta clase a esos botones al pasar el cursor?

Answer 1

Agregue el siguiente código

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

Si solo necesita estos botones, puede agregar el nombre de identificación

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

DEMO

Answer 2

El selector más eficiente que puede usar es un selector de atributos .

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

Aquí hay una demostración en vivo : http://tinkerbin.com/3G6B93Cb

Answer 3

Tienes dos opciones:

1. Amplíe su definición de clase .paging :

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

2. Use la jerarquía DOM para aplicar el estilo CSS:

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