How to apply a CSS class on hover to dynamically generated submit buttons?

Question

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.

.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 this there is no question. I want to apply the CSS class something like the following to all of those buttons on mouse hover.

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

Those buttons with the name attribute btnPage are generated dynamically in a loop. Therefore, I think it is inconvenient to apply the preceding CSS class based on the id attribute.

So, how can this class be applied to those buttons on hover?

Answer 1

Add the below code

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

If you need only for these button then you can add id name

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

DEMO

Answer 2

The most efficient selector you can use is an attribute selector.

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

Here's a live demo: http://tinkerbin.com/3G6B93Cb

Answer 3

You have two options:

1. Extend your .paging class definition:

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

2. Use the DOM hierarchy to apply the CSS style:

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