Member Avatar for erik216

I need to make a web component
There have a link to control show / hide a div
When user mouseover the link. The div will drop down. When mouse out of the div. The div will hide.

Where can I find this script?
Thanks~

  • 3 Contributors
  • 2 Replies
  • 136 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by lambing
Member Avatar for JorgeM

You can easily do this with jquery. Documentation at jquery.com. If you have some code written and need help polishing it, post your code.

Member Avatar for lambing

I'm not sure why would you want to use JavaScript for making a dropdown. You can use css for this one. But here's what you need if you need a script.

This is a sample markup:

<div id="link-wrapper">
    <a href="#" id="link">Hover to show div</a>
    <div class="hide" id="some-div">
        <ul>
            <li>
                <a href="#">link1</a>
            </li>    
            <li>
                <a href="#">link2</a>
            </li>    
        </ul>
    </div>
</div>​



.hide {
    display: none;
}

#some-div {
    margin-top: 50px;
    background-color: #ccc;
}

#link-wrapper {
    width: 150px;
}
​

The sample script

$('#link-wrapper').mouseover(function() {
    $('#some-div').show();
}).mouseout(function() {
    $('#some-div').hide();
});

​
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.