在一定范围内移出元素后，如何保持 hover 属性处于活动状态？
[英]How to keep on hover properties active after moving off the element within a certain range?
问题描述
I've set up a menu as pictured in the snippet below.
我已经设置了一个菜单，如下面的片段所示。 I want the user to be able to hover over the central icon and then be able to select one of the buttons on the side.我希望用户能够通过中央图标 hover 然后能够 select 侧面的按钮之一。 I've had some success by placing another, larger element in front of the icon when the icon is hovered on and then chaining some hovers together but then as soon as they hovered over a button all the other ones disappeared.当图标悬停在图标前面时，我通过在图标前面放置另一个更大的元素，然后将一些悬停链接在一起，但是一旦它们悬停在一个按钮上，所有其他元素都消失了，我取得了一些成功。 I've also tried expanding the padding of the #navCont element but the buttons disappear when hovering over any of them (it also pushes all my content up if I expand the bottom area)我也尝试过扩展 #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 https://i.stack.imgur.com/qZDam.jpg
Ideally, I'd like the buttons to remain active while the cursor is in this area (see link above) after they have appeared via the icon, however, a rectangular area of that size would also be ok.理想情况下，我希望按钮在 cursor 通过图标出现后处于此区域（参见上面的链接）时保持活动状态，但是，该大小的矩形区域也可以。
2 个解决方案
解决方案1
0 2021-03-02 23:36:40
You could create an on hover event on your squid icon using javascript that when triggered keeps the menu content visible until a mouseout event on some larger parent area is triggered您可以使用 javascript 在您的 squid 图标上创建一个 on hover 事件，该事件在触发时保持菜单内容可见，直到触发某个较大父区域上的 mouseout 事件
Something like this:像这样的东西：
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"
};
You might have to undo some of your CSS so that JS controls the visibility instead of CSS:hover您可能必须撤消一些 CSS 以便 JS 控制可见性而不是 CSS:hover
解决方案2
0 2021-03-03 01:10:24
I found a workaround using JQuery.我找到了使用 JQuery 的解决方法。 I just toggled the button visibility if the mouse didn't move to them fast enough after leaving the main icon如果鼠标在离开主图标后没有足够快地移动到按钮上，我只是切换了按钮的可见性
$("#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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.