无法在鼠标悬停时隐藏/显示工作答案

【问题标题】：Cannot get hide/show on mouseover to work无法在鼠标悬停时隐藏/显示工作
【发布时间】：2019-04-29 19:13:44
【问题描述】：

基本上，我一直在尝试各种方法并在此网站上寻找答案。由于某种原因，我的策略都不起作用。当我将鼠标悬停在具有“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>

【问题讨论】：

您查看过错误控制台吗？您的 javascript 中存在语法和其他错误。
不，我没有，你是怎么做到的？我需要下载解释器吗？
我找到了一个并将其修复为： var num1 = document.getElementByClassName("top"); num1.onmouseover(function() { var changeIt = getElementByClassName("topb"); if (changeIt.style.visibility === "hidden") { changeIt.style.visibility = "visible"; }else { changeIt.style.可见性 = "隐藏"; }});
几乎所有浏览器都有一个显示错误的开发者控制台。谷歌会帮助你。
getElementByClassName 不存在。正确的语法是getElementsByClassName，它会返回一个HTMLCollection，所以正确的语法是var num1 = document.getElementsByClassName('top')[0]。与changeIt 相同。然后你必须在num1 上绑定一个onmouseout 事件来处理隐藏

标签： javascript html css

【解决方案1】：

第一个：

没有像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]

【讨论】：

【解决方案2】：

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("鼠标悬停", 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】：

仅使用 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 一开始就使用这个按钮，如果你悬停它，一些动画会触发。

【讨论】：