Show/Hide div on mouseover

Juniper747 · 02-19-2012, 07:39 AM

I have a concatenated list of member names, with corresponding profile pics. I am trying to implement something similar to Facebook, where when you mouseover the picture or member name, another div appears, such as an "x" or "delete link" which lets you click to delete that member.

I tried to implement the a show/hide with the following, but this won't work with me since my list is concatenated, and since you can only have one id per div- this method won't cut it.

So, how can I make this happen?

Non-working Code:

Code:

HTML
           <div >
                <div id="showhide">
                    Line 1
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 2
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 3
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 4
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 5
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 6
                </div>
            </div>
 
Javascript:
<script>
	function mover(){
document.getElementById("visiblediv").style.display="block"
	}
	function mout() {		
document.getElementById("visiblediv").style.display="none"
	}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>			

CSS:
#visiblediv {
	visibility:visible;
	border:1px dotted black;
}

xelawho · 02-19-2012, 03:51 PM

you can try the following. I moved your html around a little so that the visiblediv is inside its showhide "container" div - it seemed easier that way and I don't think affects what you are trying to do:

(and you are right, by the way - giving multiple divs the same id will only get you in trouble, whereas you can have as many as you like with the same class name

)

Code:

<html>
<head>
</head>
<body>
         <div >
                <div class="showhide">
                    Line 1
                <div id="visiblediv1" style="display: none;">
                    Line 2
                </div>
				</div>
            </div>
            <div >
                <div class="showhide">
                    Line 3
                <div id="visiblediv2" style="display: none;">
                    Line 4
                </div>
				</div>
            </div>
            <div >
                <div class="showhide">
                    Line 5
                <div id="visiblediv3" style="display: none;">
                    Line 6
                </div>
				</div>
            </div>
 
<script type="text/javascript">
var divs=document.getElementsByTagName("div")
for (var j = 0; j < divs.length; j++) {
if (divs[j].className=="showhide"){
divs[j].onmouseover=function(){
this.childNodes[1].style.display="block"
		}
divs[j].onmouseout=function(){
this.childNodes[1].style.display="none"
		}				
	}
}
</script>			
</body>
</html>