Hi there CSSie,
and a warm welcome to these forums. 
Try it like this...
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled document</title>
<style>
#button1 {position:fixed;top:200px;left:650px;}
#button2 {position:fixed;top:300px;left:650px;}
#button3 {position:fixed;top:400px;left:650px;}
#button4 {position:fixed;top:500px;left:650px;}
#button1:focus~#content #def,
#button2:focus~#content #def,
#button3:focus~#content #def,
#button4:focus~#content #def {display:none;}
#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3),
#button3:focus~#content div:nth-child(4),
#button4:focus~#content div:nth-child(5) {display:block;}
#content {
border:1px dashed black;
width:300px;
height:500px;
position:fixed;
left:750px;
top:150px;
background:rgba(181,142,146,0.5);
color:black;
font-size:10px;
text-align:center;
}
#faq,#her,#and,#enj {display:none;}
</style>
</head>
<body>
<a id="button1" href="#" tabindex="1"><img src="http://img62.imageshack.us/img62/3523/p42e.png" alt=""></a>
<a id="button2" href="#" tabindex="2"><img src="http://img16.imageshack.us/img16/3742/lnam.png" alt=""></a>
<a id="button3" href="#" tabindex="3"><img src="http://img829.imageshack.us/img829/2347/kflq.png" alt=""></a>
<a id="button4" href="#" tabindex="4"><img src="http://img24.imageshack.us/img24/5111/zv9.png" alt=""></a>
<div id="content">
<div id="def">This is where I put the default information. No clicks needed </div>
<div id="faq">FAQ content will go here.</div>
<div id="her">Her content will go here.</div>
<div id="and">And content will go here.</div>
<div id="enj">Enjoy content will go here.</div>
</div>
</body>
</html>
coothead
Bookmarks