Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    92
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Show/Hide div on mouseover

    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;
    }

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • Users who have thanked xelawho for this post:

    Juniper747 (02-21-2012)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •