CSS HOVER

[Sketch]

I don't want people to laugh at me for this question, I'm sure it is really simple..

I want my mouse to change to a pointer when it hovers over any type of;

submit.
button.
reset.

So;

<input type="submit">

I would want to it change to a pointer when it hovers.

I can't work it out. I have tried

input:hover {
cursor: pointer;
}

but that changes for input type="text" which is bad because it will confuse people

I also tried;

submit:hover

and it doesn't work

Is there anything I can do without having to apply a class to each of my buttons?

Please let me know.

Cheers

[Ricoool]

<input type="submit" style="cursor:pointer">

forget about hover

Originally Posted by Sketch

I don't want people to laugh at me for this question, I'm sure it is really simple..

I want my mouse to change to a pointer when it hovers over any type of;

submit.
button.
reset.

So;

<input type="submit">

I would want to it change to a pointer when it hovers.

I can't work it out. I have tried

input:hover {
cursor: pointer;
}

but that changes for input type="text" which is bad because it will confuse people

I also tried;

submit:hover

and it doesn't work

Is there anything I can do without having to apply a class to each of my buttons?

Please let me know.

Cheers

[Sketch]

Thanks Ricoool but I didn't want to have to go and change each button..Because it could take some time

[DaveyBoy]

find and replace :

<input type="submit">

with

<input type="submit" style="cursor:pointer">

[Sketch]

I will do that if I have to, but some of my submits already have styles.

I am guessing there is no way to do it in the style sheet?

[Ricoool]

<input type="submit" class="pointing">

input.pointing {
cursor: pointer;
+ whatever styles you have
}

[Michael Allison]

input { cursor: pointer }



That should do it. I haven't tested it, but it should work for all your input fields.

-Michael

[Ricoool]

Originally Posted by Michael Allison

input { cursor: pointer }



That should do it. I haven't tested it, but it should work for all your input fields.

-Michael

If you do that all other form elements also get the hand, like text fields, not so good

[Sketch]

Thanks guys,

Michael I had already tried that, and it did what Ricoool said, makes everything have the funny little hand.

I tihnk I will do what daveyboy said, come to think of it I haven't used "style" only "class" in my buttons so it should work fine

Cheers Everyone!

[LazyJim]

A more advanced method you are looking for is available, but not supported by all browsers.

On a side note I do not recommend using style="". Using class="" is preferable as it allows you to update all the relevant buttons by editing only one bit of CSS instead of many! (Don't forget you can also use multiple classes in an element by listing them separated by a single space character, e.g. class="classone classtwo classthree").

The more advanced method I mentioned would not be supported by all browsers, (especially old ones)...

In your CSS use the square brackets selector modifier something like this - [x=y] where x is an attribute name and y is the value it needs in order to be "selected" in the current CSS rule. You will still need to use a class for cross-browser compatibility (if you wish).

input[type=button], input[type=submit], input[type=reset], input.pointer {
	cursor:pointer;
}

<input type="submit" class="pointer">

This is CSS2 stuff so I'd guess only IE would require the class!
http://www.w3.org/TR/1998/REC-CSS2-1...bute-selectors

[LazyJim]

Incidently the :hover part is irrelevant!