April 22, 2011

Show a div when a mouseover on a link

Question by Pandu

If I mouseover on a link it has to show div.

My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.

How to do this using javascript?

Answer by Starx

Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.

Here is a demo


<a href="#">
    <div class="toshow">
<a href="#">
    <div class="toshow">


.toshow { 
    position: absolute; 
    background: #f00; 
    width: 200px; 
a:hover div.toshow { 

You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!