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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    92
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Javascript show/hide on mouseover div

    Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my 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;
    }
    Any ideas, as to why it's not working?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    You can *NOT* use the same ID for more than one element on a page.

    The fact that your code works even for the first such <div> is just luck: You happened to choose a browser that ignores all but the first such ID. Other browsers wouldn't have worked at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    92
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Ok... thanks. Know any other ways I could implement what I'm trying to do?

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Juniper747 View Post
    Ok... thanks. Know any other ways I could implement what I'm trying to do?
    maybe getElementbyClass

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,632
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by myth024 View Post
    maybe getElementbyClass
    you mean getElementsByClassName
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    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
    •