Forum Moderators: not2easy

Message Too Old, No Replies

Input image : change border on hover

How to write the css

         

NCAnnie

3:06 pm on Mar 15, 2004 (gmt 0)

10+ Year Member



I have struggled with css syntax to get the border I want for the <input type = "image" ...>
now can anyone help me to make the border change colour on mouseover or hover.
I have this in my css
input.image { border:2px solid #CCCCCC; }
and this in my html
<INPUT TYPE = "IMAGE" class="image" ...>
what else do I need?

Alternative Future

3:17 pm on Mar 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hello and Welcome to WebmasterWorld NCAnnie,

input.image:hover { border:2px solid #CCCCCC }

input is your selector, image is your class selector which requires a Pseudo-class of hover as above.

I think this should help you out.

Note: you can also remove the semi colon when it is the last element.

-George

NCAnnie

3:45 pm on Mar 15, 2004 (gmt 0)

10+ Year Member



Thanks for the welcome!
now I have
input.image { border:2px solid #CCCCCC; }
input.image:hover { border:2px solid yellow }
in the css file, but my image still doesn't change colour when I pass the mouse over it. :(

i was thinking of a 2-image rollover, but I am suing the image in the place of a sibmit button, so can I do that?

NCAnnie

DrDoc

3:47 pm on Mar 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can't get the image itself to change color, just the border. Plus, :hover on anything but anchors doesn't work in IE (which I assume you are currently using for testing).

NCAnnie

4:10 pm on Mar 15, 2004 (gmt 0)

10+ Year Member



Sorry for the misspellings, and of course, I meant the image border. (I was so delighted to get a quick reply that I didn't proof-read)
So, if hover won't work for what I want to do, is there another way? I just want the image to look different when the user has put the mouse over it...

DrDoc

4:30 pm on Mar 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There are two things you can do...

1) Use a "behavior file" to make IE understand :hover on all elements
2) Use mouseover/mouseout events to reset the class name (or the border)
onmouseover="this.style.borderColor='yellow'" onmouseout="this.style.borderColor='black'"

Alternative Future

4:33 pm on Mar 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



.imageOff{
border: 0px
}
.imageOn{
border: 1px solid #000
}

<input class="imageOff" type="image" src="" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'">

DrDoc bet me too it I would go along with his suggestions.

-george

NCAnnie

4:55 pm on Mar 15, 2004 (gmt 0)

10+ Year Member



Thanks a million, lads
Perfect!