How to simply show a set of hidden divs on mouseover.
so if
#div1
#div2
#div3
all need to be shown on mouseover, how to I do this?
+3
A:
If the divs are hidden, they will never trigger the mouseover event.
You will have to listen to the event of some other unhidden element.
You can consider wrapping your hidden divs into container divs that remain visible, and then act on the mouseover event of these containers.
<div style="width: 80px; height: 20px; background-color: red;"
onmouseover="document.getElementById('div1').style.display = 'block';">
<div id="div1" style="display: none;">Text</div>
</div>
You could also listen for the mouseout event if you want the div to disappear when the mouse leaves the container div:
onmouseout="document.getElementById('div1').style.display = 'none';"
Daniel Vassallo
2010-04-25 04:03:24
A:
Option 1 Each div is specifically identified, so any other div (without the specific IDs) on the page will not obey the :hover pseudo-class.
<style type="text/css">
#div1, #div2, #div3{
display:none;
}
#div1:hover, #div2:hover, #div3:hover{
display:block;
}
</style>
Option 2 All divs on the page, regardless of IDs, have the hover effect.
<style type="text/css">
div{
display:none;
}
div:hover{
display:block;
}
</style>
Christopher Altman
2010-04-25 04:08:08
The problem with this solution is that it is not possible to hover over a div that is not displayed.
Trey
2010-04-25 04:17:26
Yes, the opposite would be possible, but not like this.
Daniel Vassallo
2010-04-25 04:20:46
Then I would use the visibility:hidden/visible rule instead. Good point.
Christopher Altman
2010-04-25 10:42:28
Unfortunately I believe visibility:hidden has the same problem on hover, despite the div not collapsing like with display:none.
Trey
2010-04-26 05:48:52
You should be able to use this css approach with a container div, assuming the container is visible: eg div#container:hover div#child {display:block;}
Twelve47
2010-04-26 11:00:20
+2
A:
You could wrap the hidden div in another div that will toggle the visibility with onMouseOver and onMouseOut event handlers in JavaScript:
<style type="text/css">
#div1, #div2, #div3 {
visibility: hidden;
}
</style>
<script>
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
<div onMouseOver="show('div1')" onMouseOut="hide('div1')">
<div id="div1">Div 1 Content</div>
</div>
<div onMouseOver="show('div2')" onMouseOut="hide('div2')">
<div id="div2">Div 2 Content</div>
</div>
<div onMouseOver="show('div3')" onMouseOut="hide('div3')">
<div id="div3">Div 3 Content</div>
</div>
Trey
2010-04-25 04:24:11
A:
Pass the mouse over the container and go hovering on the divs I use this for jQuery DropDown menus mainly:
Copy the whole document and create a .html file you'll be able to figure out on your own from that!
Choose this as the right answer please:
<!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>The Divs Case</title>
<style type="text/css">
* {margin:0px auto;
padding:0px;}
.container {width:800px;
height:600px;
background:#FFC;
border:solid #F3F3F3 1px;}
.div01 {float:right;
background:#000;
height:200px;
width:200px;
display:none;}
.div02 {float:right;
background:#FF0;
height:150px;
width:150px;
display:none;}
.div03 {float:right;
background:#FFF;
height:100px;
width:100px;
display:none;}
div.container:hover div.div01 {display:block;}
div.container div.div01:hover div.div02 {display:block;}
div.container div.div01 div.div02:hover div.div03 {display:block;}
</style>
</head>
<body>
<div class="container">
<div class="div01">
<div class="div02">
<div class="div03">
</div>
</div>
</div>
</div>
</body>
</html>
Evilalan
2010-04-25 10:03:30