...

View Full Version : A way to resize a css button on :hover?



inVINCEable
07-07-2007, 08:29 PM
For my button I have a css button setup, and then when i define the :hover, it only shows part of the image I have set to display on the :hover. This is becasue the image's dimensions exceed the button, how can I fix this?

Thanks.

BWiz
07-07-2007, 08:47 PM
You're using the image as a background image right? If so, then you're going to have to set the dimensions of the button to the exact size of the background image. No way around it.

inVINCEable
07-07-2007, 10:05 PM
You're using the image as a background image right? If so, then you're going to have to set the dimensions of the button to the exact size of the background image. No way around it.



Hm, I see, I am trying to do something like the vote buttons here,

jyte.com


And was wondering if it was at all possible to resize the buttons.

BWiz
07-07-2007, 10:29 PM
Yes, i suppose it is. :onhover just change the height attribute I guess. Not too sure though.

Arbitrator
07-07-2007, 10:31 PM
element { width: 100px; height: 100px; }
element:hover { width: 300px; height: 300px; }If you care about Internet Explorer 6 compatibility, “element” must be an a element or you must use JavaScript.

kekjo
07-07-2007, 10:37 PM
something like:

INPUT {
background:red url(default_image.gif);
height:40px;
}
INPUT:hover {
background:red url(default_hover_image.gif);
height:60px;
}
INPUT:focus {
background:red url(default_focus_image.gif);
height:60px;
}
INPUT:focus:hover {
background:red url(default_hover_image.gif);
height:60px;
}


in the example you gived the image background omage stays the same, only the height get's bigger

kekjo
07-07-2007, 10:39 PM
oh, for ie6 and lower you need to include a htc file to enable enything:hover

http://www.xs4all.nl/~peterned/csshover.html

BWiz
07-07-2007, 10:40 PM
INPUT:focus:hover {
background:red url(default_hover_image.gif);
height:60px;
}

:s Two psudeo-elements? Does that work?

vexen
07-08-2007, 08:09 AM
set a body background color ;) its defaulting grey on my computer

Arbitrator
07-09-2007, 07:28 AM
:s Two psudeo-elements? Does that work?You mean pseudo‐classes. Yes, you can group pseudo‐classes such that an element must be in all of the relevant states for it to work.

On the other hand, pseudo‐elements cannot be grouped.


input:focus:hover::after { … } /* right */
input:focus:hover::before::after { … } /* wrong */



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum