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?

Stefan van den Akker · Accepted Answer · 2016-07-02 12:22:44Z

35

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

edited Jul 2, 2016 at 12:22

Stefan van den Akker

7,0597 gold badges52 silver badges69 bronze badges

answered Mar 6, 2013 at 9:39

Sowmya

27k21 gold badges102 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

George Katsanos Over a year ago

this will target all the inputs, not the ones with btnPage name attribute as Tiny asked.

Sowmya Over a year ago

@GeorgeKatsanos He is asking for all buttons (I want to apply the CSS class something like the following to all of those buttons on mouse hover.). Those buttons with the name attribute btnPage are generated dynamically so it is not a good idea to assign the class name coz you cant give class name for dynamically generated buttons. This is what he is saying

George Katsanos Over a year ago

Well his English is not perfect obviously.. I think he should clarify. If he wants all inputs to have some styling then #paginate input {} will do it - but I don't understand why he had to mention the name btnPage attribute part..

Sowmya Over a year ago

@GeorgeKatsanos :) his questions is clear. The reason why he has mentioned the btnPage attribute is to say its not possible to style the button with class name since it is dynamically generated.

George Katsanos Over a year ago

but it is. CSS will be applied to all elements, even if they're loaded with an Asynchronous call or whatever. That's the thing.

|

George Katsanos · Accepted Answer · 2013-03-06 09:50:45Z

5

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

edited Mar 6, 2013 at 9:50

answered Mar 6, 2013 at 9:42

George Katsanos

14.3k18 gold badges71 silver badges114 bronze badges

4 Comments

Sowmya Over a year ago

This doesn't work when you add the custom style tinkerbin.com/noZjmZkA The result showing in your page is default hover style of button

George Katsanos Over a year ago

You changed my example, that's not what I pasted.

Sowmya Over a year ago

I changed to show you the effect. It should work with that style. In your demo if you remove the css also it gives the same result

George Katsanos Over a year ago

I changed the url. The problem is that input elements should not be changed with CSS rules.

Tiny · Accepted Answer · 2016-05-27 10:11:14Z

2

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;
}

edited May 27, 2016 at 10:11

Tiny

28k113 gold badges352 silver badges611 bronze badges

answered Mar 6, 2013 at 9:41

strauberry

4,1945 gold badges37 silver badges50 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related