open div with the help of javascript

I want to open div when i take my mouse cursor on some specific link, and hide that div when i moues开发者_JAVA技巧out from the link.

---

try this

    <script type="text/javascript">
function show(divID) {
var item = document.getElementById(divID);
if (item) {
item.className='unhidden';
}
}
function hide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className='hidden';
}
}
</script>

<style type="text/css">
.hidden {
display: none;
}

.unhidden {
display: block;
}
</style>

<p><a href="javascript:void(0);" onmouseover="show('test1');" onmouseout="hide('test1')">Show/Hide</a></p>

<div id="test1" class="hidden">
testing
</div>

---

Here's a solution that does not use jQuery. jQuery makes this possible in many fewer lines of code. Just read the documentation of methods like .show and .bind and you will easily see why.

The code below uses JavaScript's ability to set dynamic CSS styles. It also attaches event handlers entirely within JavaScript to remain as unobtrusive as possible in the HTML. Here's a live link to my example so that you can see if this is what you want or not.

HTML:

<a id="myMagicLink" href="http://www.google.com/">My Magic Link</a>
<div id="openingDiv">Opens a div</div>

Example CSS:

#openingDiv {
    background-color: #ffc;
    border: 1px solid;
    padding: 0.5em;
    display: none;
    position: absolute;
    left: 100px;
    top: 100px;
}

JavaScript:

function listenForEvent(elem, eventType, handler) {
    if(elem.addEventListener) {
        elem.addEventListener(eventType, handler, false);
    }
    else {
        elem.attachEvent('on' + eventType, handler);
    }
}

listenForEvent(window, 'load', function() {
    var link = document.getElementById('myMagicLink'),
        div = document.getElementById('openingDiv');

    listenForEvent(link, 'mouseover', function() {
        div.style.display = 'block';
    });

    listenForEvent(link, 'mouseout', function() {
        div.style.display = 'none';
    });

});

---

Old school:

<a href="#" id="foo" onmouseover="togglediv();" onmouseout="togglediv();">Toggler</a>
<div id="bar">Content</div>

And the js:

togglediv = function() {
  var mydiv = document.getElementById('bar');
  mydiv.style.display = mydiv.style.display == '' ? 'block' : '';
}

If you don't want to lard up your HTML with inline event handlers (and you shouldn't), you can go with something like this:

function setupHover(id){
  var el = document.getElementById(id);
  if (el.addEventListener) { // modern browsers
    el.addEventListener ('mouseover',togglediv,false);
    el.addEventListener ('mouseout',togglediv,false);
  } else if (el.attachEvent) { // IE
    el.attachEvent ('onmouseover',togglediv);
    el.attachEvent ('onmouseout',togglediv);
  } else { // anybody else
    el.onmouseover = togglediv;
    el.onmouseout = togglediv;
}

@idealmachine shows a nice way to encapsulate this in a listener function in his(?) answer.

Then you'd call setupHover('foo') in your onload:

window.onload = function(){
  setupHover('foo');
  // other stuff
};

Even easier, if you're using a library (jQuery, for example), you can do this while transparently abstracting away cross-browser differences:

$(document).ready( function(){ // when the DOM is loaded
  $('a#foo').hover( // listen for hovers on the <a>
    function(){ 
      $('#bar').toggle(); // and toggle visiblity directly
      // $('#bar').toggleClass('visible'); // or toggle a class to achieve same
    } 
  );
});

That's probably easiest, although you do need to include jQuery or your equivalent library of choice.

All assume your div is initially hidden:

<style type="text/css">
div#yourdiv { display: none; }
</style>