As the title says here's one way to have simple show and hide effect using just CSS and avoid JavaScript. Idea is to use some tag inside the link (for example bold, or span or what ever) which will hide it's content in normal state and show in hover state. Mostly it's used for creating interesting menu effects with some additional images.
So here's basic example code, and a few ideas where you can also use this, for example i've used it Gunmetal free WordPress Theme, you can see the demo here.
<ol id="nav"> <li><a href="#"><b>»</b>Menu Item</a></li> <li><a href="#"><b>»</b>Menu Item</a></li> <li><a href="#"><b>»</b>Menu Item</a></li> ... </ol> #nav a { display: block; margin: 0; border: none; } #nav a b { float: right; display: none; } #nav a:hover { background: none; border: none; text-decoration: none; } #nav a:hover b { display: inline; }
As bold tag you can use what ever you want like span or italic... The thing I'm seeing a lot these days is like descriptive headline on menu hover. The idea is the same, you place some tag into your link with empty span that has background image and absolute position and show it on hover. Here's example code.
<ul id="menu"> <li id="one"><a href="#"><span></span>Menu Item</a></li> <li id="two"><a href="#"><span></span>Menu Item</a></li> <li id="three"><a href="#"><span></span>Menu Item</a></li> ... </ul> #menu span { display: none; position: absolute; } #menu a:hover span { display: block; } #one span { background: transparent url(one.gif) no-repeat scroll 0 0; height: 11px; width: 111px; left: 35px; top: -20px; ... } #two span { background: transparent url(two.gif) no-repeat scroll 0 0; height: 222px; width: 22px; left: 15px; top: -10px; ... }
And here are some ideas where you could also use this. For example to show that some link has target blank, so you give that link some id and do the same thing here for it with some descriptive icon. Have in mind that if you're using it inside some paragraph rest of text is going to move, so you could add padding on regular state and remove it on hover to fix it.
And here's another example, you can also use this to show a new menu like i am on every post title (those share icons) just i'm using a Javascript for it, didn't think if this when i was coding this 
Have fun!
Have some feedback? Leave a comment
pretty cool ! thanks dude
Yes, good idea!
Looking good, i would just like to see more examples…
nice trick
in feb this year i started this http://www.wscoop.com
But I need your help….
I need links to web design and development, site , articles links…… anything you think of….
Please are you able to help me make this into a great resource for developers and designers.
Pingback: homepage templates
Pingback: no deposit required bingo games
Pingback: cheap homeowners insurance quotes
great article thanks
Nice post, I must try this one for sure… keep it up buddy.
Pingback: lowest price teen health online www triumph com corona ca
Pingback: switch card pokeris
This is good stuff, thank you very much indeed! BTW I really like the layout of this page
thanks! this was really helpful!
Nice post, I must try this one for sure… keep it up buddy.
dasdasdasdasdasdasd
ssssssss
can you show us the demo? i visit the demo being provided but i couldn’t find the sanple.
%100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.
Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı
Nice, thanks for the code
Thanx for the nice idea.
I have two different button state pictures, saved in one graphic. That is the cell background graphic. I’m using CSS so on hover, it changes the offset and displays the other state.
How can I also hide and show other text, elsewhere on the page when that image is clicked? without using java script still
kameralı sohbet burADA TIKLA sende
Setting an element’s display to “none” requires the browser to re-render the element. A better approach is the following.
.hide { position:absolute; left:-9999em }
.show { position:static; left:0 }
another post about CSS
realy i should learn it
http://www.outlet-louisvuittonukcom.com/louis-vuitton-agendas-damier-ebene-canvas-c-72_74.html
How can this be done when the user clicks, instead of hovers? Thanks.
from a solid starting point. Basic is infact many templates in one using a single stylesheet. By adding/removing small snippets of code from the html, Basic can go from a fluid 3 column web template for a fixed
wow amazing i love it ..perfect..
Thanks for sharing this.
I just needed it
Nice share I just found one more tutorial using CSS3 for toggle(hide or show) and NO JAVASCRIPT
http://webstutorial.com/html5-css3-toggle-slideup-slidedown/html-5
its nice;thank u!!!!!!!!!!!!!!