如果一个锚是隐藏的，显示另一个锚？

Question

当另一个锚被隐藏时，如何显示一个锚？(我试着做一个自定义上下文菜单。如果您悬停在“数据安全”选项卡上，锁图标应该关闭，要做到这一点，您必须使用一个打开的和一个关闭的锁执行两个不同的锚点，这就是为什么我想知道，如果另一个锚是隐藏的，如何显示一个锚。display:none)

​

window.addEventListener("contextmenu", function(event) {
  event.preventDefault();
  var contextElement = document.getElementById("context-menu");
  contextElement.style.top = event.offsetY + "px";
  contextElement.style.left = event.offsetX + "px";
  contextElement.classList.add("active");
});

window.addEventListener("click", function() {
  this.document.getElementById("context-menu").classList.remove("active")
});

#context-menu {
  position: fixed;
  z-index: 10000;
  width: 150px;
  background: #494949;
  transform: scale(0);
  transform-origin: top left;
  margin-top: 50px;
  margin-left: 2.5px;
}

#context-menu h1 {
  font-size: 1.5rem;
  margin: 0;
  margin-left: 5px;
  font-weight: 600;
}

#context-menu h1::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 145px;
  background-color: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 150px;
  margin-top: 5px;
}

#context-menu.active {
  transform: scale(1);
  transition: transform 200ms ease-in-out;
}

#context-menu .item {
  padding: 8px 10px;
  font-size: 15px;
  color: #eee;
}

.item-title {
  padding: 8px 10px;
  font-size: 15px;
  color: #eee;
}

#item-datasafety-lock-open {
  display: block;
}

#item-datasafety-lock-open:hover {
  display: none;
}

#item-datasafety-lock-closed {
  display: none;
}

#item-datasafety-lock-closed:hover {
  display: block;
}

#context-menu .item:hover {
  background: #555;
}

#context-menu .item a {
  color: #ffffff;
  text-decoration: none;
}

#context-menu .item i {
  display: inline-block;
  margin-right: 5px;
  margin-left: 10px;
}

#context-menu hr {
  margin: 2px;
  border-color: #555;
}

<p>Right-click anywhere</p>

<div id="context-menu">
  <div class="item-title" id="context-menu-title">
    <i></i>
    <h1>Schnellwahl:</h1>
  </div>
  <div class="item">
    <a href="/index.html"><i class="fa-solid fa-house"></i>Home</a>
  </div>
  <div class="item">
    <a href="/kontakt.html"><i class="fa-solid fa-address-book"></i>Kontakt</a>
  </div>
  <div class="item">
    <a href="/link.html"><i class="fa-solid fa-link"></i>Links</a>
  </div>
  <div class="item">
    <a id="item-datasafety-lock-open" href="/datenschutz.html"><i  class="fa-solid fa-lock-open"></i>Datenschutz</a>
    <a id="item-datasafety-lock-closed" href="/datenschutz.html"><i class="fa-solid fa-lock"></i>Datenschutz</a>
  </div>
</div>

​

谢谢你的帮助

Answer 1

这个问题已经解决了，我做了一个

onmouseenter=scriptStart();

并使用

onmouseleave=scriptStop();

或在“守则”中

<div class="item" id="context-menu-home" onmouseleave="contextMenuHome_notActive()" onmouseenter="contextMenuHome_active()">
   <a href="/index.html"><i class="fa-solid fa-house"></i>Home</a>
</div>

而且起作用了！