PDA

View Full Version : ?:hover..?

Jst
10-07-2004, 09:57 AM
Hi, im making this site, but i have a problem that really needs to be fixed.

I want to make a table with some text in it, and when you go over it, it shows another table. I thought it was something like (in CSS): td:hover { border-color: (color); border-style: solid; border-width: 1px; border-color: (color); } and when i go over the original table, it shows another table.

Tnx
Jst.
Horus_Kol
10-07-2004, 10:17 AM
the :hover pseudoclass can be used only to change the styling of an element - not the content of the site.

You will need to do this as a javascript onMouseOver event...
Jst
10-07-2004, 10:27 AM
Anyone maybe know how to do this ?

Tnx
Jst.
coothead
10-07-2004, 11:37 AM
Hi there Jst,

and a warm welcome to these forums :D

Here is the simple javascript that Horus suggested ...
<html>
<head>
<title>expose table</title>

<style type="text/css">
<!--
#hidden {
display:none;
position:absolute;
left:300px;
top:10px;
}
table {
border:solid 1px #000000;
}
td {
width:162px;
height:100px;
border:solid 1px #000000;
background:#dddddd;
text-align:center;
}
//-->
</style>

<script type="text/javascript">
<!--
function exposeTable(el) {
document.getElementById("hidden").style.display="block";

el.onmouseout=function() {
document.getElementById("hidden").style.display="none";
}
}
//-->
</script>

</head>
<body>

<div>
<table><tr>
<td onmouseover="exposeTable(this)">mouseover</td>
</tr></table>
</div>

<div id="hidden">
<table><tr>
<td>now exposed</td>
</tr></table>
</div>

</body>
</html>
AaronCampbell
10-07-2004, 11:40 AM
#1: give the table that you want to appear an id="whatever"
#2: make it hidden (style="visibility:hidden;")
#3: give the cell (or better yet, a regular link that fills the cell) an onmouseover="document.getElementById('whatever').style.visibility = 'visible';"
#4: to hide it, add this: onmouseout="document.getElementById('whatever').style.visibility = 'hidden';"

Make sure that all the red stuff is the same.

If you want to make a link that fills a cell (some browsers won't acknowledge a link on a td), do this:
<td><a href="#" style="display:block; width:100%; height:100%;">link text</a></td>
AaronCampbell
10-07-2004, 11:42 AM
Coothead you beat me :)

The display=none is probably better than visibility=hidden. It won't mess with your layout as much when it's not showing.
Jst
10-07-2004, 01:00 PM
The table has to appear on another (at the same place) table so not beside the other table.

<edit>
I fixed it, but i dont see the name of the link, it supposed to be "home" but now because "display:none;" its not showing the hyperlink.
</edit>

Tnx
Jst.