Remember that trick to show a sub-menu using CSS in my older tutorial? Well, I had an idea for a project of mine, and with a little help from my dear friend Raphael. Last night, I launched my little website project called “A Night Story” and made some tweaks. Ignore the story, it’s just a concept. If you hover over the word “city” in the text, you’ll see another textbox appear with more information about the word.

The whole concept of the website is to create a story, a swift, easy-to-read story that contains more information than it seems.

Hover effect

So, let me teach you how to create such a hover effect on any word in the text, and on an unlimited amount of words without much work

The HTML

First, we have to create an ideal HTML situation that will be easy to describe with CSS later on. First, pick the word, in my case “city” and then the text.

We’ll have to put the whole thing within a “span” and then create another “span” for the hover text like this:

<span><a href="terms/city.html">city</a><span>the city was large, and dark. People droned on and walked aimlessly through the streets every day. The smog filtered through their lungs. No one could escape the industrialization that overtook and destroyed the greenery that had once been there, the darkness shrouded my moves. </span></span>

If you don’t want to use the <a> tag, then use another tag that you can use as an “anchor”, ie so the browser knows its special, a good one to use could be the tag <b>, which will let people know that the bold text is important and hoverable. Otherwise, you can create ids for all these spans and that’s just too much work. You can try different variations of this formula and see how it works. This is what I did, and it worked out well

The CSS

Let’s focus on the CSS. One thing, I want to do is change the word “city” so that it does not appear…like such a link. Let me show you how I customized the link so that it appears the way it does:

a {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}

a:link, a:visited
{
color: #0000CC;
text-decoration: none;
}

a:hover
{
background-color: #369;
color: #fff;
}

That creates a nice effect. The underline is gone, the tag has no special padding or a margin. I’ve also took the the liberty to make its background match the rest of the div (not necessary). Next I changed it so that the color does not change once clicked, but the color of the word will still be different than white. Once hovered, the word will change color and background as shown on my test page.

Let’s get down to disappearing! Believe it or not, this is so easy, you’ll be asking yourself why you hadn’t thought of it:

span>span{
display: none;
position: absolute;
width: 300px;
}
span:hover>span {
display: block;
padding: 5px;
background-color: white;
border: 1px solid black;
}

First, I used a strange class: span>span means, the span within another span will follow these properties. The text will not display, the position is absolute (so that it will cover other text once hovered over), and the width is nice 300px. You can change the width attribute, and mess around with the position if you wish to. I probably will in the final version.

Next, span:hover>span is a pseudo weird class. The span:hover class basically is a class that takes effect only when you mouse over the original span. By adding >span, we’ve created something genius. This class is a class that works only once the original span is moused over. Now, we’re using the display:block property to display the nice block of text. I used some padding and added a background color so that the other text won’t interfere. The border is there only for neatness.

And that’s it! With just these few steps you’ve created something that people use javascript for!

Pros:

The pros of using CSS:

1. It is really easy to change the effects
2. You don’t have to learn javascript
3. It works even if the user has javascript disabled
4. It is faster than javascript because it requires no calculation or parsing

Cons:

The Cons of using CSS for this particular effect:

1. less maneuverability
2. less special effects
3. looks too simple for some websites

With some experimenting and patience, you can create really beautiful drop-down textboxes with custom backgrounds. Well, the possibilities are endless!

Again, go check out my testing site for a demo!