• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2659
  • Last Modified:

onMouseOut change div to visibility:hidden

I have a list - onmouseout of the <ul> I want it to hide a div on the page.  Any suggestions?

Thanks,
Hayden
0
Quarfelburg
Asked:
Quarfelburg
  • 3
  • 2
1 Solution
 
xp_commanderCommented:
<script type="text/javascript">

function showIt() {
document.frm.text.style.visibility="visible"; //set to visible
}
function hideIt() {
document.frm.text.style.visibility="hidden"; //set to hidden
}
</script>

call this on your onmouseout event such as :-

<UL>
<LI><A HREF="order.html"
    onMouseOver="describe('Order a product'); return true;"
    onMouseOut="hideIt()">
Order Form</A>
<LI><A HREF="email.html"
    onMouseOver="describe('Send us a message'); return true;"
    onMouseOut="hideIt();">
Email</A>
</UL>


Alternatively, you can use
document.frm.text.style.display="none"; // hide
AND
document.frm.text.style.display="block"; // show
As this above code will not only makes it invisible but removes it from the page, so it does not takes up any space
0
 
QuarfelburgAuthor Commented:
Perhaps I wasn't clear - I have a div absolutely positioned on a page and want an onmouseout to change the css on my style sheet to visiblity:hidden


0
 
xp_commanderCommented:
Sorry , forgot to mention above code was two snapshot from one of my apps , you would need to use
document.getElementById to get the pointer to your div tag , i.e :-

So the pseudo code would look like :-

In your list   : onMouseOut="hideIt(div id);"

In hide function :- function hideIt(Pass the div Object here) {
document.getElementById(div id).style.visibility="hidden"; //set to hidden
}
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
QuarfelburgAuthor Commented:
what do you mean by "Pass the div Object here"?

Pardon my ignorance.
0
 
btech1Commented:
<html>
<head<script type="text/javascript">
function hideIt() {
     document.getElementById("me").style.visibility="hidden";
}
</script>
</head>
<body>
<div id="me">
  Seeing me?
</div>
<ul>
  <li><a href onmouseout="hideIt();">Hide it</a>
</ul>
</body>
</html>
0
 
QuarfelburgAuthor Commented:
Sorry meant to put assist on xp_commander

Anyway to change that?

Thanks guys,
Hayden
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now