Question

我正在尝试使用SVG和Wikipedia和Facebook等JavaScript来产生悬浮卡效果。您可以说可以通过使用工具提示来解决它，但不是因为我想像Wikipedia一样使它动态化。我想在纯js而不是jquery上使用它。在这种情况下，哪个活动最适合我？ onmouseover / onmousemove吗？但是在鼠标悬停时效果不理想！尝试帮助我，这对我来说非常重要。演示图片

这是一个与我的问题类似的问题，但是这个问题还没有答案。 How to make a hover effects like Wikipedia and 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>

（注意：我的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>

如何制作悬停效果，如Wikipedia（JavaScript）？

0 个答案: