I am trying to make it so when I mouseover on one div another div appears. And when I mouse out, the div disappears again.

Here's what I have, it's not working. Both divs are always showing.

<script>
function mover(){
    document.getElementById("visiblediv").style.display="block"
}
function mout() {
    document.getElementById("visiblediv").style.display="none"
}
</script>


<div id = "div1" onmouseover="mover()" onmouseout="mout()">
    Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
    This div is visible
</div>

Any way I can make this work any better? Am I supposed to have something in my main.css file?

    Works for me. shrug

    What browser are you using?

      This is my full HTML file minus the doctype.

      <html lang="en">
<head>
    <title>test</title>
	<script>
	function mover()
	{
		document.getElementById("visiblediv").style.display="block"
	}

function mout()
{
	document.getElementById("visiblediv").style.display="none"
}
</script>

</head>
<body>
    <div id = "div1" onmouseover="mover()" onmouseout="mout()" style="background-color:#F00;">
		Show the div
	</div>
	<div id = "visiblediv" style="border:1px dotted black">
		This div is visible
	</div>
</body>
</html>
        Bonesnap;10995922 wrote:

        This is my full HTML file minus the doctype.

        <html lang="en">
<head>
    <title>test</title>
	<script>
	function mover()
	{
		document.getElementById("visiblediv").style.display="block"
	}

function mout()
{
	document.getElementById("visiblediv").style.display="none"
}
</script>

</head>
<body>
    <div id = "div1" onmouseover="mover()" onmouseout="mout()" style="background-color:#F00;">
		Show the div
	</div>
	<div id = "visiblediv" style="border:1px dotted black">
		This div is visible
	</div>
</body>
</html>

        Here's the problem I'm having now:
        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:

        
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?

          You are using multiple identical ids which isn't allowed. And since there was another thread about the exact same thing, it's probably also a cross post which isn't allowed either.

            Write a Reply...