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    x000D   x000D   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    x000D   lt div class  paginate  gt  x000D       lt input type  submit  name  btnFirst  value  First   x000D             class  disableCurrentPage  disabled  disabled   gt  x000D       lt input type  submit  name  btnPrev  value  Previous  class  paging   gt  x000D           x000D       lt input type  submit  name  btnPage  value  1  x000D             class  disableCurrentPage  disabled  disabled   gt  x000D       lt input type  submit  name  btnPage  value  2  class  paging   gt  x000D       lt input type  submit  name  btnPage  value  3  class  paging   gt  x000D       lt input type  submit  name  btnPage  value  4  class  paging   gt  x000D       lt input type  submit  name  btnPage  value  5  class  paging   gt  x000D       lt input type  submit  name  btnPage  value  6  class  paging   gt  x000D       lt input type  submit  name  btnPage  value  7  class  paging   gt  x000D       lt input type  submit  name  btnPage  value  8  class  paging   gt  x000D       lt input type  submit  name  btnPage  value  9  class  paging   gt  x000D       lt input type  submit  name  btnPage  value  10  class  paging   gt  x000D           x000D       lt input type  submit  name  btnNext  value  Next  class  paging   gt  x000D       lt input type  submit  name  btnLast  value  Last  class  paging   gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Accepted 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

User · Answer

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

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to hover

Examples related to mousehover