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 {_x000D_
font-family:Arial,Helvetica,sans-serif;_x000D_
padding:3px;_x000D_
margin:3px;_x000D_
}_x000D_
_x000D_
.disableCurrentPage {_x000D_
font-weight:bold;_x000D_
background-color:#999;color:#FFF; _x000D_
border:1px solid #999;_x000D_
text-decoration:none;color:#FFF;_x000D_
font-weight:bold;_x000D_
}_x000D_
_x000D_
.paging {_x000D_
cursor: pointer; _x000D_
background-color: transparent;border:1px solid #999;_x000D_
text-decoration:none;_x000D_
color:#9CC;_x000D_
font-weight:bold;_x000D_
}<div class='paginate'>_x000D_
<input type="submit" name="btnFirst" value="First" _x000D_
class="disableCurrentPage" disabled="disabled"/>_x000D_
<input type="submit" name="btnPrev" value="Previous" class="paging"/>_x000D_
_x000D_
<input type="submit" name="btnPage" value="1"_x000D_
class="disableCurrentPage" disabled="disabled"/>_x000D_
<input type="submit" name="btnPage" value="2" class="paging"/>_x000D_
<input type="submit" name="btnPage" value="3" class="paging"/>_x000D_
<input type="submit" name="btnPage" value="4" class="paging"/>_x000D_
<input type="submit" name="btnPage" value="5" class="paging"/>_x000D_
<input type="submit" name="btnPage" value="6" class="paging"/>_x000D_
<input type="submit" name="btnPage" value="7" class="paging"/>_x000D_
<input type="submit" name="btnPage" value="8" class="paging"/>_x000D_
<input type="submit" name="btnPage" value="9" class="paging"/>_x000D_
<input type="submit" name="btnPage" value="10" class="paging"/>_x000D_
_x000D_
<input type="submit" name="btnNext" value="Next" class="paging"/>_x000D_
<input type="submit" name="btnLast" value="Last" class="paging"/>_x000D_
</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?
This question is related to
html
css
hover
mousehover
You have two options:
Extend your .paging class definition:
.paging:hover {
border:1px solid #999;
color:#000;
}
Use the DOM hierarchy to apply the CSS style:
div.paginate input:hover {
border:1px solid #999;
color:#000;
}
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
Source: Stackoverflow.com