Question

基本上，我一直在尝试各种事情，并在此站点上寻找答案。由于某种原因，我的任何策略都不起作用。当我将鼠标悬停在具有“ top”类的链接上时，我想使“ topb”部分中的段落出现，然后在离开时消失。但是，我无法让div甚至出现在鼠标悬停时。有什么建议么？谢谢。

var num1 = document.getElementByClassName("top");
num1.onmouseover(function() {
var changeIt = getElementByClassName("topb");
if (changeIt.style.visibility === "hidden") {
changeIt.style.visibility = "visible";
}else {
changeIt.style.visibility = "hidden";
});

.topb {
    position:absolute;
    top:140px;
    left:420px;
    color:black;
    border:2px solid black;
    padding-left:10px;
    padding-right:10px;
    visibility:hidden;
}

<ul class = "sidebar">
<li> <a class="top" href= "filename.html"> A </a>`enter code </li> 	
<li> <a class="second" href= "filename.html"> B </a> </li>
<li> <a class="third" href= "filename.html"> C </a></li>
<li> <a class="fourth" href= "filename.html"> D </a></li>
<li> <a class="bottom" href= "filename.html"> E </a></li>
</ul> 

<div class="topb">
<p> sample of application here </p>
</div>

Answer 1

仅使用CSS而不是javascript来完成此操作，

：悬停

选择器与

结合

::之后

加

visibility:hidden;

documentation link

示例

.topb {
    position:absolute;
    top:140px;
    left:420px;
    color:black;
    border:2px solid black;
    padding-left:10px;
    padding-right:10px;
}

.topb:hover::after {
  visibility:hidden;
}

我一开始在网站www.mr-programs.com的按钮上使用它，如果将鼠标悬停在它上，则会触发一些动画。

Answer 2

第一：

没有像document.getElementByClassName这样的api，也许你想使用这个document.getElementsByClassName，

第二：

即使api正确，也应该注意Returns an array-like object of all child elements which have all of the given class names.

第三：

如果您的代码在现代浏览器中运行，我建议您使用此api document.querySelector，因为它非常简单。但是如果它在较旧的浏览器中运行，可能jQuery是一个不错的选择。

现代浏览器：

var num1 = document.querySelector(".top"); // `dot means it is a className

纯JavaScript：

var num1 = document.getElementsByClassName(".top")[0]

Answer 3

num1.onmouseover = function（）{.....}

var num1 = document.getElementByClassName("top");
num1.onmouseover = function() {
var changeIt = getElementByClassName("topb");
if (changeIt.style.visibility === "hidden") {
changeIt.style.visibility = "visible";
}else {
changeIt.style.visibility = "hidden";
};

或

num1.addEventListener（“ mouseover”，function（）{ ... }）;

var num1 = document.getElementByClassName("top");    
num1.addEventListener("mouseover", function(){
    var changeIt = getElementByClassName("topb");
    if (changeIt.style.visibility === "hidden") {
    changeIt.style.visibility = "visible";
    }else {
    changeIt.style.visibility = "hidden";
});

鼠标悬停时无法隐藏/显示

3 个答案: