To hide a div

[MacPC]

Hi there,

I want to do something different to my site. What I like to do is to have a <div> shows a background. The text will appear only when the visitor roll the mouse over. Right now I have the code like this:
The CSS:

div.box {
position: relative;
background: transparent;
top: 485px;
left: 260px;
width: 500px;
height: 340px;

}
a.siteHeader {
position: absolute;
background: transparent;
top: 10px;
left: 8px;
width: 490px;
margin: 0;
padding: 0;
color: #3b498c;
font-weight: bold;
text-decoration: none;

}

a.siteHeader:hover {
background: transparent;
color: #ffe2b4;
font-size: 2em;
}

The html:
<div class="box">
<a class="siteHeader" href="xyz.html">Text only shows up when mouse over</a>
</div>

This works fine, but I am wondering if there's a way to do it without using the <a> tag? Can I achive this effect by using CSS alone,? I don't want to use Javascript at all.

Any suggestion will be greatly appriciated.

M.

 

[kiko_friendly]

Yep. Just take out the a LoL

.siteHeader {
position: absolute;
background: transparent;
top: 10px;
left: 8px;
width: 490px;
margin: 0;
padding: 0;
color: #3b498c;
font-weight: bold;
text-decoration: none;

}

.siteHeader:hover {
background: transparent;
color: #ffe2b4;
font-size: 2em;
}

 

[MacPC]

Hi, kiko

Thx for the reply, I actually didn't realize, except the IE6, :hover can be used on other elemants besides <a>

So you are in Cambridge, UK. I am in Cambridge MA US.

M

 

[kiko_friendly]

Did it work? I didn't test it myself, but I know that it works in some way or another because I've used that a few times.

I'm now using images and javascript;

http://www.unphased.org

 

[MacPC]

Yea, it works!
What I did was:
div.box {
position: relative;
background: url(images/box_8bkg.gif);
top: 100px;
left: 0px;
width: 252px;
height: 212px;
border: 0px solid green;
z-index: 10;
}

div.box:hover {
background: transparent;
width: 0px;
height: 0px;
}

This covers a embeded video with a background image, the video can only be seen when the mouse is over it. It works on Safari and FF (it flickers tho), as always, stupid IE 7 needs a bit of twaeks and doesn't work on the crappy IE 6 at all since IE6 doesn't support :hover on any other elements but the anchor.