Hey there, and welcome to Argee’s first tutorial! This one is pretty simple, we will just be walking through the nuances of the :hover selector in CSS.
This selector,like most styles, can be applied to absolutely any HTML element in your web page to create a rollover effect. A lot of people still use javascript to do this, which works but is deprecated. In other words, this is the ninja way to do things. 
1. Applying hover to a link element
Say that you have the following element in your web page, just a basic link with the id ‘my-link’.
<a id="my-link">Hi, I am a link!</a>
The id tag lets us apply a style specifically to this element - a web page may only have one instance of a given id, which means you can’t give the id of ‘my-link’ to any more elements on your page. Let the following be the div you wish to apply styling to:
<a id="my-link">Hi, I am a link!</a>
Now, to apply the actual hover effect, you would put the following code in your CSS - which should preferably be an external stylesheet.
/* Style when no hover */
#my-link {
color: #ccc;
text-decoration: none;
}
/* Style when mouse-overed */
#my-link:hover {
color: #000;
text-decoration: underline;
}
This will give you a basic text link that changes color and is underlined upon mouse over. Not good enough for you? Well, read on over to the next section…
2. Applying hover to a div element
What’s great about cascading style is it’s versatility - it can be applied to any kind of element to change it’s appearance in various ways. Let the following be the div element that you wish to apply styling to:
<a id="my-div">Hi, I am a div!</a>
I will give you a basic example, keep in mind that which styles you apply is totally up to you.
/* Style when mouse-overed */
#my-div:hover {
color: #000;
background-color:#ddd;
text-decoration: underline;
border: 1px solid #000;
}
This should give you a div element that changes in appearance when hovered over. Of course, these are only example styles - you may choose to apply a different, better styling to your elements.
Note that while we only experimented with <a> and <div> tags here, the hover selector can be used for styling any HTML tags.
Well, that was all. Not too tough, was it? Hope you enjoy your new-found skills!
Basic Tutorial, CSS
Javascript may be the deprecated way, but can you preload images with CSS?
When I first roll over that big arrow at the bottom of your page, I keep thinking, ‘that would be so much better if it was preloaded.’ Just because the first time when I rollover it, I can tell the browser has to load the rollover image into the cache. Though since that button isn’t that important, I’m sure you won’t bother. Even if it was, I’m sure you wouldn’t anyway. As far as I can remember, your main nav buttons on deepsarcasm weren’t pre-loaded.
Baahhh back to studying
Actually, you CAN preload images with CSS. All you have to do is make a child element that is hidden until the parent is hovered.
The display:none; style will hide the element but will load the image anyway.
As far as that button is concerned, no I don’t care much about preloading it, but I might if I have enough free time and nothing to do.
Ahh, sneaky ninja style css eh. Nice.
there’s an error in the text of your “About” section, check it out.
If you want a non-CSS, non-javascript method of preloading images, you can also simply add an img tag with height and width set to 1
@RG: in the second part of your tutorial, the first line has an
tag instead of aOh great, that didn’t come out properly; I meant, it has an “a” tag instead of a “div” tag
That is intentional - a div tag is not allowed to have a name property, and the javascript that is making the highlights on the code needs that. Therefore, I’m putting in an a tag to make it standards compliant.
It doesn’t look bad though, even with javascript off.
Maybe so, but you’re using an id tag, not a name tag; so you can use ‘div’ here instead of ‘a’.
Actually, I am using a name tag - everything you see here has been altered by javascript that changes things that have the name set to code. Turn off your javascript and see.
No no, I’m talking about the first line of code that you’ve written under the second part, the one with <a id=”my-div”>Hi, I am a div!</a>
That should be a div element …