Question

如果我鼠标悬停在链接上，则必须显示div。

我的问题是我必须在页面内的所有链接中显示div。对于每个链接，我必须显示不同的div。

如何使用javascript进行此操作？

Answer 1

因为，您的问题没有指明任何内容。我会给出一个最简单的解决方案。也就是说，使用纯CSS，不需要JS。

这是demo

标记

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

你不应该尽可能地依赖脚本。这是一个非常简单的示例，显示使用链接的:hover事件。

Answer 2

步骤可以是：

使用不同的ID制作多个div。
将style="display:none;"提供给所有div。
制作链接以显示相应的div。
在链接调用js函数的onMouseOver中，将显示属性更改为正确div的块。例如： - document.getElementById("divId").style.display = "block";对于所有其他div set display：none;在那个js函数中。

示例代码： -

您的链接：

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

你的divs：

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

JS功能：

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

如果你有更多的div，那么你可以在js函数中使用 for loop 而不是 if ... else 。

Answer 3

查看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>

基本上做这样的事情

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

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

});

Answer 4

编辑：oops ...这将需要jquery。不知道为什么我在这里假装jquery。

您可以为所有链接指定ID，例如

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

依旧......

和div元素类似

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

依旧......

然后

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

鼠标悬停在链接上时显示div

4 个答案: