Question

我已经设置了一个菜单，如下面的代码片段所示。我希望用户能够将鼠标悬停在中央图标上，然后能够选择侧面的按钮之一。我通过在图标悬停时在图标前面放置另一个更大的元素，然后将一些悬停链接在一起而取得了一些成功，但是一旦它们悬停在按钮上，所有其他元素都消失了。我也试过扩展#navCont 元素的内边距，但是当鼠标悬停在任何一个元素上时按钮消失（如果我扩展底部区域，它也会向上推我的所有内容）

body {
  background: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
}

#title {
  color: white;
  width: 40%;
  margin-bottom: 3vh;
}

#navCont {
  position: relative;
  top: 0;
}

#sqlogo {
  opacity: .75;
  width: 3em;
  animation: pulse 1.8s cubic-bezier(.28, 0, .55, 1) 1s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.25);
  }
}

#sqlogo:hover {
  opacity: 1;
  animation-play-state: paused;
}

#navCont .btn {
  opacity: .75;
  height: 1.5em;
  display: none;
  position: absolute;
}

#navCont:hover img.btn {
  display: block;
}

#navCont .btn:hover {
  opacity: 1;
}

#navCont #btnWork {
  left: 4em;
  top: 50%;
  transform: translateY(-50%);
}

#navCont #btnAbout {
  right: 4em;
  top: 50%;
  transform: translateY(-50%);
}

#navCont #btnContact {
  top: 4em;
  left: 50%;
  transform: translateX(-50%);
}

<body>
  <div class="main">
    <div id="title"> Title </div>
    <div id="navCont">
      <img id="sqlogo" src="http://drive.google.com/uc?export=view&id=1nybF_-lqMK9k0_X8EfgU8tKbiIzM459U" />
      <img id="btnWork" class="btn" src="http://drive.google.com/uc?export=view&id=1o2pds3XK3Wh78pQPfC5cgsqWRHEIHy-Q" />
      <img id="btnAbout" class="btn" src="http://drive.google.com/uc?export=view&id=1XGf88jotbT8n4NmBPc979gI1oYbhjgXb" />
      <img id="btnContact" class="btn" src="http://drive.google.com/uc?export=view&id=1EjimLtnyIZRsfPbX3yc2wJ_s1Qxpwj45" / />
    </div>
  </div>
  </div>
</body>

https://i.stack.imgur.com/qZDam.jpg

理想情况下，我希望按钮在通过图标出现后，在光标位于该区域（参见上面的链接）时保持活动状态，但是，该大小的矩形区域也可以。

Answer 1

您可以使用 javascript 在您的鱿鱼图标上创建一个悬停事件，该事件在触发时保持菜单内容可见，直到触发某个较大父区域上的鼠标移出事件

像这样：

   document.getElementById("sqlogo").onmouseover = function(){
      // show the buttons
      getElementsByClassName("btn").style.display = "block"
   };
   document.getElementById("navCont").onmouseout = function(){
      // hide the buttons
      getElementsByClassName("btn").style.display = "none"
   };

您可能需要撤消一些 CSS 以便 JS 控制可见性而不是 CSS :hover

Answer 2

我找到了一个使用 JQuery 的解决方法。如果鼠标离开主图标后移动速度不够快，我只是切换了按钮的可见性

$("#sqlogo").mouseenter(function() {
  $("#sqlogo").addClass("freeze");
  $(".btn").addClass("vis");
});

let t;

$("#sqlogo").mouseleave(function() {
  t = setTimeout(function() {
    $("#sqlogo").removeClass("freeze");
    $(".btn").removeClass("vis");
  }, 500);
});

$(".btn").mouseenter(function() {
  clearTimeout(t);
});
$(".btn").mouseleave(function() {
  $("#sqlogo").removeClass("freeze");
  $(".btn").removeClass("vis");
});

body {
  background: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
}

#title {
  color: white;
  width: 40%;
  margin-bottom: 3vh;
}

#navCont {
  position: relative;
  top: 0;
}

#sqlogo {
  opacity: .75;
  width: 3em;
  animation: pulse 1.8s cubic-bezier(.28, 0, .55, 1) 1s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.25);
  }
}

#sqlogo:hover {
  opacity: 1;
}

#sqlogo.freeze {
  animation-play-state: paused;
}

#navCont>.btn {
  opacity: .75;
  visibility: hidden;
  height: 1.5em;
  position: absolute;
}

#navCont>.vis {
  visibility: visible;
}

#navCont>.btn:hover {
  opacity: 1;
}

#navCont > #btnWork{
  left: 4em;
  top: 50%;
  transform: translateY(-50%);
}

#navCont #btnAbout {
  right: 4em;
  top: 50%;
  transform: translateY(-50%);
}

#navCont #btnContact {
  top: 4em;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="main">
    <div id="title"> Title </div>
    <div id="navCont">
      <img id="sqlogo" src="http://drive.google.com/uc?export=view&id=1nybF_-lqMK9k0_X8EfgU8tKbiIzM459U" />
      <img id="btnWork" class="btn" src="http://drive.google.com/uc?export=view&id=1o2pds3XK3Wh78pQPfC5cgsqWRHEIHy-Q" />
      <img id="btnAbout" class="btn" src="http://drive.google.com/uc?export=view&id=1XGf88jotbT8n4NmBPc979gI1oYbhjgXb" />
      <img id="btnContact" class="btn" src="http://drive.google.com/uc?export=view&id=1EjimLtnyIZRsfPbX3yc2wJ_s1Qxpwj45" / />
    </div>
  </div>
  </div>
</body>

在特定范围内移动元素后如何保持悬停属性处于活动状态？

2 个答案: