0

我正在尝试通过 javascript创建hover和输出。hover

我有

test.prototype.build = function(){
   other codes...

    link.href         = '#';
    link.innerHTML   += 'test'
    link.onmouseover  = hover
    link.onmouseout   = hoverOut

   other codes...
}





function hover(){
    var div = document.createElement('div');
        div.class='testDiv';
        div.innerHTML = 'test';
        $(this).prepend(div);

}


function hoverOut(){
    var div = document.getElementsByClassName('testDiv');
        div.style.display='none';

}

我的任务是创建一个hover和hover out函数。我的问题是我不确定testDiv当用户将鼠标悬停在链接之外时如何隐藏。 getElementsByClassName在我的情况下似乎不起作用。在javascript中有更好的方法吗？非常感谢！

4

1 回答 1

2

document.getElementsByClassName('testDiv')返回一个集合，而不是单个对象，但您可能只是this用来引用当前对象。由于您在原始代码中显示了一些 jQuery，因此我认为这里没问题。

function hoverOut(){
    $(this).find(".testDiv").hide();
}

或者，在普通的 javascript 中，它可能是：

function hoverOut(){
    var elems = this.getElementsByClassName("testDiv");
    for (var i = 0; i < elems.length; i++) {
        elems[i].style.display = "none";
    }
}

但是，您的 hover 和 hoverOut 代码不匹配，因为您每次在悬停时都会在悬停时创建一个新的 div，然后只将其隐藏在 hoverOut 中，这样它们就会累积。

如果你想删除你在 hoverOut() 中添加的 div，你可以这样做：

function hoverOut(){
    $(this).find(".testDiv").remove();
}

或者在普通的 javascript 中：

function hoverOut(){
    var elems = this.getElementsByClassName("testDiv");
    for (var i = 0; i < elems.length; i++) {
        elems[i].parentNode.removeChild(elems[i]);
    }
}
于 2013-04-15T23:20:02.803 回答