It's when you move your mouse over certain parts of the page say a link and it changes color or someones headshot and it pops out at you or when you go to type a comment and a scary image pops up that's hovering.
So you want to know how to make things change when you hover over them I know you do it's fun to have different effects on your page.
Hovering or hover effects are so easy to do all you do is get the selector you want to change on hover and put :hover after it eg .itembox (boxes on your page) will be .itembox:hover or .replybox will be .replybox:hover
Note --- > :hover must be underneath or after or it wont work
Anything and I mean anything can have a hover effect
try this one for the reply box
.replybox{
border: 1px solid #fff;
background-image:none;
background-color:blue;
}
.replybox :hover{
border: 1px solid #9FB563;
background-image:none;
background-color:#000;
}
or this one for where you type
.replybox textarea {
background-color:#000;
color:#fff;
}
.replybox textarea :hover{
background:url(http://tinyurl.com/6yyxg9);
background-repeat:no-repeat;
background-position:bottom center;
}
Links just to be confusing are slightly different but still have :hover
a:link{
color:#BABABA;
}a :hover{
color:#C3C3C3;
}
I won't put a load of examples as all you really need is :hover
So there you go, now you know anything can have a hover effect when the mouse moves over it no script needed nothing fancy just :hoverRemember it will only be the part the mouse is over that changes not everywhere just the part the mouse is over
Make sure text size is the same on :hover and borders the same width or you will have things popping and moving all over the place ..unless you like them like that in which case have a little fun and make them different on purpose
Edit updated:::
It's not magic. It's in the css -- Snowburst
Thanks to snowburst for these
Each one of these will hover a different effect (see the little letters) try them and see what happens
/*hover on bold text*/
b :hover {
color:#087705;
}
/*hover on italic text*/
i :hover {
color:#0091FF;
}
/*hover on underlined text*/
u :hover {
color:#F5B2C2;
}
/*hover on
s :hover {
color:#A7A7A7;
}
As said text doesn't need to be a link for a hover effect
check this link out it's a try it editor for hover effects use some of the code from above ..have a play see what you can do
post restored
