Home/ Questions/Q 7034109
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:08:46+00:00

I haven’t been able to find the answer to this anywhere. How do you

  • 0

I haven’t been able to find the answer to this anywhere.

How do you make a hidden div appear when mousing over where it would have been?
Please do not tell me how to make a link, I know how to make a link 😉

I have tried:
a.) onmouseover set visibility to visible and onmouseout set visibility to hidden
this works in 0 browsers

b.) setting borders to 0px and background transparent and innerhtml to “” onmouseout and reverting onmouseover
this works in chrome

c.) This was the most popular answer on the internet, which i knew wouldn’t work, but I tried anyway: make a container div set to visible and then do visibility visible and visibility hidden for the inner div

d.) Setting opacity to 1/100 and 0
works in chrome

e.) last resort: i tried making a transparent gif and having it display onmouseout
this also failed

I haven’t tried jquery’s .hover but I have read that it may not work correctly.

I have no other ideas. Will somebody help, please?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I get it right you want div element to show if you are over it and hide when the mouse is not over. If that’s it you can do it only with html and css:

    <head>
<style>
        #outerDiv{width:100px;height:100px;background-color:blue;}
        #innerDiv{width:100px;height:100px;background-color:red;display:none;}
        #outerDiv:hover #innerDiv {display:block;}
    </style>
</head>
<html>
    <div id="outerDiv">
        <div id="innerDiv">some text</div>
    </div>
</html>

    The outer div is always visible and when it’s hovered the inner one is shown.

    • 0