3

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?

Jonathan Henson
  • 8,076
  • 3
  • 28
  • 52
Ryan Stortz
  • 393
  • 1
  • 5
  • 12

4 Answers4

2

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.

Draganov
  • 375
  • 4
  • 8
2

I think that this is going to help you: http://jsfiddle.net/eb4x9/ The mouseover event won't trigger when the div is hidden so you can detect it's position and size. Here is the source:

HTML

<div id="foo"></div>

CSS

#foo {
    width: 300px;
    height: 300px;
    background-color: red;
    visibility: hidden;    
}

JS

$(document).mousemove(function (event) {
    var div = $('#foo'), 
        divLeft = div.offset().left, 
        divTop = div.offset().top, 
        divWidth = div.width(), 
        divHeight = div.height();
    if ((event.pageX >= divLeft && event.pageX <= divLeft + divWidth) &&
        (event.pageY >= divTop && event.pageY <= divTop + divHeight)) {
        div.css('visibility', 'visible');
    } else {
        div.css('visibility', 'hidden');        
    }
});
$(document).mouseleave(function (event) {
    var div = $('#foo');
    div.css('visibility', 'hidden');        
});

Best regards!

Minko Gechev
  • 25,304
  • 9
  • 61
  • 68
  • yea i figured it might end up looking like this, but i was hoping for a simpler way, considering the div is circular. I would have to generate an array of points with an elliptical function, but oh well it's close enough! thanks for the reply! – Ryan Stortz Jan 05 '12 at 21:35
0

Try setting the display attribute of the div to 'block' along with the visibility attribute to 'visible' in your onmouseover event.

Set the display to 'none' and visibility to 'hidden' to hide.

Of course the trouble will be firing the mouse over on a hidden div.

This works in every browser I have ever used it in.

Jonathan Henson
  • 8,076
  • 3
  • 28
  • 52
  • exactly. once it is hidden, I am stumped on what to do. – Ryan Stortz Jan 05 '12 at 20:46
  • 1
    @Ryan gotcha, The trick will be to pick a div or object that will already be displayed --presumably, you have something displaying where the other one ought to be displayed--, then use the onmouseover event on that to set the attributes I mentioned. – Jonathan Henson Jan 05 '12 at 20:50
  • @Ryan you could add an empty div with some height and width. onmouseover of this div set display of your original div to 'block' – rahool Jan 05 '12 at 21:01
  • 1
    @rahool, an empty div would still not display since the container is only as large as its contents. You could have a transparent image though. – Jonathan Henson Jan 05 '12 at 21:14
  • @Jonathan, if the empty div have some height and width it should show. Please see the answer that i have posted. – rahool Jan 05 '12 at 21:40
0

Try this, having two divs one empty and other with your content and toggling between them on mouseover

<html>
<head>

<script>
function toggle() {
    var your_div = document.getElementById("your_div");
    var empty_div = document.getElementById("empty_div");

    if(your_div.style.display == "block") {
            your_div.style.display = "none";
            empty_div.style.display = "block";
    }
    else {
            your_div.style.display = "block";
            empty_div.style.display = "none";
    }
}
</script>

<style>
   #empty_div{width:100px; height:100px;}
   #your_div{width:100px; height:100px; border: 1px solid #000fff;}
</style>
</head> 

<body>
   <div id="your_div" onmouseover="toggle()">xyz</div>
   <div id="empty_div" onmouseover="toggle()"></div>
</body>
</html>
rahool
  • 629
  • 4
  • 6