I am trying to make a hovercard effect using SVG and JavaScript such as Wikipedia and Facebook.
(我正在尝试使用SVG和Wikipedia和Facebook这样的JavaScript产生悬浮卡效果。)
You can say that It can be solved by using tooltips but not because I want to make it dynamic like Wikipedia.(您可以说可以通过使用工具提示来解决它，但不是因为我想像Wikipedia一样使它动态化。)
I want to use it on pure js, not jquery.(我想在纯js而不是jquery上使用它。)
In this case which event is best for me?(在这种情况下，哪个活动最适合我？)
onmouseover/onmousemove ?(onmouseover / onmousemove吗？)
But on mouseover is not working perfectly!(但是在鼠标悬停时效果不理想！)
try to help me plz, It's very very important for me.(尝试帮助我，这对我来说非常重要。)
Demo image(演示图片)
Here is a question which is similar to my question, But this question has no answer yet.
(这是一个与我的问题类似的问题，但是这个问题还没有答案。)
How to make a hover effects like Wikipedia and Facebook
(如何制作悬停效果，如Wikipedia和Facebook)
<div class="content"> Lorem text <a href="/wiki/mark"> Mark Info will show here when you hover </a> Dummy text <a href="/wiki/you"> You will show here when you hover on it</a> </div> //Define one time only <div class="modal" style="display: none"> <div class="modal-title"> </div> <div class="modal-content"> </div> </div>
(NOTE: I have some problems with my CSS and js link. I am a new programmer, I want to learn more), Sorry about that.
(（注意：我的CSS和js链接存在一些问题。我是一名新程序员，我想了解更多信息），对不起。)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Wikipedia Hover Effects</title> <style> .content { font-family: Segoe UI; border: 1px solid #ddd; padding: 30px; box-sizing: border-box; line-height: 27px; } .v-content-modal { position: absolute; background: #fff; box-shadow: 0 3px 20px 0 #ddd; width: 350px; border-top: 3px solid #ddd; display: none; box-sizing: border-box; } .v-content-modal .modal-title { background: #f5f5f5; padding: 0 1.25rem; font-size: .95rem; letter-spacing: .03rem; line-height: 38px; height: 35px; border-bottom: 1px solid #ddd; } .v-content-modal .modal-content { padding: 1.75rem 1.25rem; } .v-content-modal::before { content: ""; position: absolute; top: -23px; left: 30px; border: 10px solid transparent; border-color: transparent transparent #ddd transparent; } </style> </head> <body> <div class="content"> Lorem ipsum dolor sit amet <a href="#" data-title="One" data-content="I am the first one/" id="info">One</a> adipisicing elit. Quisquam, modi neque! Cupiditate itaque vitae aliquid <a href="#" data-title="Two" data-content="I am the Second one/" id="info">Two</a>, pariatur qui sequi minima voluptates voluptatibus quae nemo! Suscipit <a href="#" data-title="Three" data-content="I am the Third one/" id="info">Three</a> quibusdam dignissimos vitae, cum cumque voluptates et hic doloribus dicta, <a href="#" data-title="Four" data-content="I am the Forth one/" id="info">Four</a> quos, nostrum in. </div> <div class="v-content-modal"> <div class="modal-title"> Title </div> <div class="modal-content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quam. </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function () { let modal = $(".v-content-modal"); let title = $(".v-content-modal > .modal-title"); let content = $(".v-content-modal > .modal-content"); let btns = document.querySelectorAll("#info"); btns.forEach(btn => { btn.addEventListener("mouseover", (e) => { modal.css({ top: 'unset', right: 'unset', left: 'unset', bottom: 'unset' }); title.html(e.target.getAttribute('data-title')); content.html(e.target.getAttribute('data-content')); let pageX, pageY, winWidth, winHeight, elmWidth, elmHeight, width_limit, height_limit = ''; pageX = e.pageX; pageY = e.pageY; winWidth = $(window).width(); winHeight = $(window).height(); elmWidth = $(".v-content-modal").width(); elmHeight = $(".v-content-modal").height(); width_limit = winWidth - elmWidth; height_limit = winHeight - elmHeight; (pageX > width_limit) ? crossWidth(): normalWidth(); (pageY > height_limit) ? crossHeight(): normalHeight(); function crossWidth() { modal.css({ right: '5px' }); } function normalWidth() { modal.css({ left: pageX }); } function crossHeight() { modal.css({ bottom: '111px' }); } function normalHeight() { modal.css({ top: e.pageY + 30 + 'px' }); } // show when all customization is completed... modal.show(); }); btn.addEventListener("mouseleave", () => { modal.hide(); }); }); }); </script> </body> </html>
ask by Md. Tahazzot translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
