Tiny Tiny - 6 months ago 20
CSS Question

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

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

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