web-dev-qa-db-fra.com

Comment appliquer une classe CSS en survol à des boutons d'envoi générés dynamiquement?

J'ai le morceau de code HTML/CSS suivant qui est utilisé pour afficher les pages en fonction du nombre de lignes récupérées dans une base de données.

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

Jusqu'à cela, il n'y a aucun doute. Je veux appliquer la classe CSS quelque chose comme ce qui suit à tous ces boutons au survol de la souris.

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

Ces boutons avec l'attribut de nom btnPage sont générés dynamiquement dans une boucle. Par conséquent, je pense qu'il n'est pas pratique d'appliquer la classe CSS précédente basée sur l'attribut id.

Alors, comment cette classe peut-elle être appliquée à ces boutons en survol?

htmlcsshovermousehover
20
Tiny

Ajoutez le code ci-dessous

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

Si vous n'avez besoin que de ces boutons, vous pouvez ajouter un nom d'identification

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

DÉMO

35
Sowmya

Le sélecteur le plus efficace que vous pouvez utiliser est un sélecteur d'attribut .

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

Voici une démo en direct : http://tinkerbin.com/3G6B93Cb

5
George Katsanos

Vous avez deux options:

  1. Étendez votre .paging définition de classe:

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

  2. Utilisez la hiérarchie DOM pour appliquer le style CSS:

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