Background color/cursor hover effect

[Azu]

I use CSS to change the background color and cursor when you mouseover a check box.

 

The problem is, in IE, the background color of the check box doesn't change, and in Opera, the default pointer isn't replaced with my custom cursor.

 

Could someone please tell me how to fix this? Oh and it works fine in Firefox

 

input:hover{background-color:#000000;cursor:url("a"),auto}

 

Edit: actually the background isn't changing in Firefox either =/

[jcombs_31]

:hover only works on anchor tags in IE.  Not sure about the cursor, didn't know you can use your own url, which I have no idea what "a" is supposed to be.

[Azu]

a is a relative file path.

And the hover works on text input fields, buttons, and textareas, not just links.

The only thing it doesn't seem to work on is checkboxes and select menus. In firefox it isn't working for checkboxes either but is for select menus.

 

I want to get that stuff working in firefox and ie like it is working in opera, and I want to get the custom cursor to work in opera like it is working in firefox and ie.

 

Please tell me how to fix it

 

I don't mind if it needs a messy hack or something as long as it works.

[wildteen88]

What jcombs was referring to about :hover only working for links in IE. Was that IE (6 and below) only supported it for anchor tags. M$ has finally got around to allowing :hover to work on any tag with the latest release of IE7.

[Azu]

Thanks, I am using the latest version of IE 7 though, and I can't figure out how to get :hover to work right on select menus and on check boxes? Please help ;-;

[Azu]

Bump >_>

 

Can you please tell me why it isn't working in IE7 and how can I fix it?

[ToonMariner]

you have input:hover add select:hover to your css.

 

OPera not changing pointer may be that it doesn't support it (I think it uses its own and thats that - someone will correct me though)

[Azu]

Sorry I did not post the entire thing

 

a:hover,input:hover,textarea:hover,select:hover,span:hover{text-align:center;background-color:#66ffff;color:#000000;cursor:url("a2.htm"),auto}

 

How do I change this so that check boxes in IE change the same way they do in Opera? Right now they do not change in IE when I put my mouse over them =(

[Azu]

Please

[Azu]

Pretty please I'd really like to get this working in IE

[Azu]

[Daniel0]

I'm not particularly good at JavaScript, but this might do it:

 

tags = getElementsByTagName("input");

for (var i = 0; i < tags.length; i++)
{ 
tags[i].onmouseover = "this.style.textAlign='center'; this.style.backgroundColor='#6ff'; this.style.color='#000';";
}

 

And for another time, please refrain from using such images. They are only annoying and simply typing bump or whatever bumps them as well as an image does.