更改 Link 可见性 -- 使用鼠标悬停和 getElementsByClassName 的事件侦听器

Question

我对JavaScript比较陌生。

我在互联网上搜索过，发现人们称之为解决方案、正确的脚本和修复等，但是 none 似乎对我有用，所以我显然遗漏了一些东西。几个小时以来一直在进行故障排除。请帮忙！

CSS：我创建了一个简单的两列 div（在 12 个列中，它向左浮动）。我有一个 CSS 过渡，可以在悬停时将其从 2% 宽度拉到 15% 宽度（几乎是完整的两列）。

HTML：我在 div 中创建了一些测试链接，我用 CSS class.

隐藏了这些链接

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

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

您需要遍历 DOM 个元素：

getElementsByClassName

Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

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

Answer 2

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

JS:

<script>
var linkpop = document.getElementById("linkpopout");
var popoutlinks = document.getElementsByClassName("menulinks");
linkpop.addEventListener("mouseover", makeVisible);
linkpop.addEventListener("mouseout", makeVisible);

function makeVisible() {
  for (let i = 0; i < popoutlinks.length; i++) {
    popoutlinks[i].classList.toggle("vis");
  }
}
</script>

绑定到元素的 'classList' 的 'toggle' 方法将根据其当前状态向元素添加或删除 class。如果 class 在那里，它会删除它，否则，它会添加它。对于这样的弹出菜单非常有用。我们必须遍历所有元素，在本例中是您的 menulinks 并切换每个元素的 class。

然后有一个 class 来打开或关闭。默认状态绑定到元素的默认值 class。

CSS:

.menulinks { visibility:hidden; }
.vis { visibility:visible }

Answer 3

不需要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>

更改 Link 可见性 -- 使用鼠标悬停和 getElementsByClassName 的事件侦听器

Change Link Visibility -- Event Listener with mouseover and getElementsByClassName

html

javascript

css

addeventlistener

getelementsbyclassname