Question

我正在尝试通过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中执行此操作？非常感谢！

Answer 1

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

你的悬停和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]);
    }
}

简单的悬停并在javascript中悬停问题

1 个答案: