CODEWITHSUNDEEP
javascript
Pandurangappa
Pandurangappa

Reputation: 97

Show a div when a mouseover on a link

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?

Upvotes: 2

Views: 7416

Answers (4)

Harry Joy
Harry Joy

Reputation: 59660

Steps can be:

  1. Make multiple divs all with different id.
  2. Give style="display:none;" to all div.
  3. Make links to show respective div.
  4. In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.

Sample code:-

Your links:

<a href="#" onclick="Changing(1)">Div 1</a>
<a href="#" onclick="Changing(2)">Div 1</a>

Your divs:

<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>

JS function:

function Changing(i) {
    if(i==1){
        document.getElementById("myDiv1").style.display = "block";
        document.getElementById("myDiv2").style.display = "none";
    } else {
        document.getElementById("myDiv1").style.display = "none";
        document.getElementById("myDiv2").style.display = "block";
    }
}

If you have more divs then you can use for loop in js function instead of if...else.

Upvotes: 3

Elijan
Elijan

Reputation: 1416

look at jquery each

<div id=div-0" class="sidediv" style="display:none" > Div for first link  </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link  </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link  </div>


<a class="linkclass" href=""> Link </a>

<a class="linkclass" href=""> Link </a>

<a class="linkclass" href=""> Link </a>

and essentially do something like this

$('.linkclass').each(function(i,u) {
    $(this).hover(function() 
    {
     $('#div-'+i).show();

   }, function() {
      $('#div-'+i).hide(); //on mouseout;
   }) 

});

Upvotes: 2

naiquevin
naiquevin

Reputation: 7796

Edit: oops ...this will need jquery. dont know why I assumed jquery here.

You can give ids to all the links such as 

<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>

and so on ..

and similarly to div elements

<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>

and so on ..

then 

$("a").hover(function () {   //callback function to show on mouseover
    var id = $(this).attr('id').replace("link-", "");
    $("#div-"+id).show();
},
function () { //if you want to hide on mouse out
    var id = $(this).attr('id').replace("link-", "");
    $("#div-"+id).hide();
}
);

Upvotes: 0

Starx
Starx

Reputation: 78991

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

Markup

<a href="#">
    Some
    <div class="toshow">
        Hello
    </div>
</a>
<a href="#">
    None
    <div class="toshow">
        Hi
    </div>
</a>

CSS

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

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.

Upvotes: 5

Related Questions