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.
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.