Question

我是JavaScript的新手。

我在互联网上搜索过，找到了人们正在调用的解决方案，正确的脚本和修正等等，但是它们似乎都不适合我，所以我显然错过了一些东西。几个小时后排除故障。请帮忙！

CSS：我创建了一个简单的双列div（12个中，它向左浮动）。我有一个CSS转换，在悬停时将它从2％宽度拉到15％宽度（几乎完整的两列）。

HTML：我在div中创建了一些我用CSS类隐藏的测试链接。

JS：当鼠标悬停在div上时，我正在尝试使用JavaScript来使它们可见。

HTML：

<div id="linkpopout" class="col-2 popout">
  <a href="www.bing.com" class="menulinks">Bing</a>
  <a href="www.yahoo.com" class="menulinks">Yahoo</a>
  <a href="www.google.com" class="menulinks">Google</a>      
</div>

CSS：

.col-2 {width: 16.66%;}

.popout {
  background:lightblue;
  transition:width 0.5s, height 0.5s;
  transition-timing-function:ease-out;
  width:2%;
  height:300px;
  float:left;
}

.popout:hover {
  width:15%;
  height:300px;
}

.menulinks {
  visibility:hidden;
}

JS：

var linkpop = document.getElementById("linkpopout");
var popoutlinks = document.getElementsByClassName("menulinks");
linkpop.addEventListener("mouseover", makeVisible);
function makeVisible() {
  popoutlinks.style.visibility="visible";
}

为了它的价值，我也试过document.getElementsByClassName(menulinks").style.visibility="visible"; 没有任何运气，我尝试使用不透明度而不是可见性来完成同样的事情，这没有任何区别。

谢谢。

Answer 1

不需要JavaScript。

.col-2 {width: 16.66%;}

.popout {
  background:lightblue;
  transition:width 0.5s, height 0.5s;
  transition-timing-function:ease-out;
  width:2%;
  height:300px;
  float:left;
}

.popout:hover {
  width:15%;
  height:300px;
}

.menulinks {
  visibility:hidden;
}

.popout:hover .menulinks {
  visibility: visible;
}

<div id="linkpopout" class="col-2 popout">
  <a href="www.bing.com" class="menulinks">Bing</a>
  <a href="www.yahoo.com" class="menulinks">Yahoo</a>
  <a href="www.google.com" class="menulinks">Google</a>      
</div>

Answer 2

您需要遍历DOM元素：

getElementsByClassName

返回具有所有给定类名的所有子元素的类数组对象。在文档对象上调用时，将搜索完整文档，包括根节点。您也可以在任何元素上调用getElementsByClassName（）;它将仅返回具有给定类名的指定根元素的后代元素。

function makeVisible() {
  popoutlinks.forEach(function(e) {
      e.style.visibility="visible";
  });   
}

Answer 3

如果要根据菜单是否显示来切换链接的可见性。你可以这样做;

JS：

menulinks

＆＃39;切换＆＃39; ＆＃39; classList＆＃39;的方法绑定到元素将根据元素的当前状态添加或删除元素。如果该类在那里，它将删除它，否则，它将添加它。对于像这样的弹出菜单非常有用。我们必须循环遍历所有元素，在本例中为.menulinks { visibility:hidden; } .vis { visibility:visible }并为每个元素切换类。

然后有一个要打开或关闭的课程。默认状态绑定到元素所需的默认类。

CSS：

{{1}}

更改链接可见性 - 使用mouseover和getElementsByClassName的事件侦听器

3 个答案: