Jak zastosować klasę CSS po najechaniu na dynamicznie generowane przyciski przesyłania?

Question

Mam następujący fragment kodu HTML/CSS, który służy do wyświetlania stron na podstawie liczby wierszy pobranych z bazy danych.

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

Upto tego nie ma wątpliwości. Chcę zastosować klasę CSS podobną do tych wszystkich przycisków po najechaniu myszą.

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

Przyciski te z atrybutem name btnPage są generowane dynamicznie w pętli. Dlatego uważam, że niewygodne jest zastosowanie poprzedniej klasy CSS opartej na atrybucie id.

Jak zatem zastosować tę klasę do przycisków po najechaniu myszą?

Answer 1

Dodaj poniższy kod

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

Jeśli potrzebne jest tylko dla tych przycisku możesz dodać nazwę id

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

DEMO

Answer 2

Masz dwie opcje :

1. Rozszerz swoją definicję .paging Klasa:

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

2. Użyj hierarchii DOM zastosować styl CSS:

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

Answer 3

Najbardziej wydajny selektor można użyć to attribute selector.

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

Oto żywo demo: http://tinkerbin.com/3G6B93Cb