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

html css hover mousehover
Tiny picture Tiny · Mar 6, 2013 · Viewed 130.5k times · Source

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.

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

Sowmya picture Sowmya · Mar 6, 2013

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

Related questions

Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More
How to affect other elements when one element is hovered

What I want to do is when a certain div is hovered, it'd affect the properties of another div. For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that …

Read More
How to show text on image when hovering?

I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using …

Read More