javascript - Show a div when a mouseover on a link - Stack Overflow

admin管理员组

文章数量:1364710

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?

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?

• javascript

Share Improve this question Follow edited Apr 22, 2011 at 6:00 Adnan 26.4k1818 gold badges8383 silver badges111111 bronze badges asked Apr 22, 2011 at 5:57 PandurangappaPandurangappa 9711 gold badge55 silver badges1313 bronze badges 2

• Er...what? I don't really understand what you are asking. – Peter Olson Commented Apr 22, 2011 at 5:59
• when i mouseover on a link i have to show a div...for each link i have to show different div in a single page – Pandurangappa Commented Apr 22, 2011 at 6:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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.

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.

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;
   }) 

});

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();
}
);

本文标签： javascriptShow a div when a mouseover on a linkStack Overflow