Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
title
</title>
<style>
.popup {
position:relative;
} .popup span {
display:none
}
/*.popup a:hover span,*/ table tr:hover .popup span{
display: inline;
z-index:100;
width: 130px;
position:absolute;
background:#ddc3a3;
top:0.5em;
left:0;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<div class="popup">
some text
<span>
some text here to take several rows
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="popup">
some text
<span>
some text here to take several rows
</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I'd like the text outside span to not show through it as it does with IE7 if you hover over the first row. I understand I should probably tell the browser exactly how to lay out everything but that span, but I have not found a solution yet as I'm using nested elements.
<script language="JavaScript">
function display(whichdiv) {
document.getElementById("div1").style.display='none';
document.getElementById("div2").style.display='none';
document.getElementById(whichdiv).style.display='block';
}
</script>
<p align="center">
<a href="#" onMouseOver="display('div1');">Div 1</a> ¦
<a href="#" onMouseOver="display('div2');">Div 2</a>
</p>
<div id="div1" style="display: none;">This would appear for Div 1</div>
<div id="div2" style="display: none;">This would appear for Div 2</div>
You would of course need to customise it to fit your needs, probably add a left and right style properties to each div for positioning. This script works by hiding all the divs, and then showing the one you passed in the whichdiv variable. You will need to add a
document.getElementById("div2").style.display='none'; line for each div, and replace the "div2" with the id of the div you are choosing. Tested in IE7 on XP.
I hope this is what you wanted!
It should be easier to get them working in FF/safari and all others except for IE (IE6 only support :hover on <a> tags ...)
table tr:hover .popup {z-index: 1;}
should do it, redefine the new stack on hover so later text is not involved in it.
I've never done popups before, but I'm trying to do a popup as well, but not on a hover, just after the page is displayed for 4 seconds and to display the popup for 10 seconds and then disappear - is it possible to do as described above please ? I would prefer to do the popup just with css if possible, but the above appears to be describing a hover - is that a hover on a link, or a hover on a page please ?
Any help much appreciated.
Dexie.
I guess that'll push you to javascript and changing the display status through the DOM.
Good to see Suzy still around - you must be part of the furniture by now ;-)
ermm - thanks I think ;)
yep Dexie abover post is about :hover on an element, CSS can activate a change using the dynamic pseudo-classes; :hover, :active, and :focus.. but for a timer you'll need js
