javascript - 如何制作像 Wikipedia 和 Facebook 这样的悬停效果

问题描述

我正在尝试使用 SVG 和 JavaScript（例如 Wikipedia 和 Facebook）制作悬停卡效果。但是如何在悬停在元素上时修复顶部三角形位置。我需要修复三角形位置和悬停动作，如 Wikipedia 或 facebook。（注意：我的 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("mousemove", (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>

再次，

<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>

当您将鼠标悬停在任何 <a> 上时，它将使用链接地址“/wiki/mark”或“/wiki/you”显示所有信息

#我们不需要每次都分配所有信息！

标签： javascripthtmlcsssvg

javascript - 如何制作像 Wikipedia 和 Facebook 这样的悬停效果

问题描述

解决方案

推荐阅读