如何制作悬停效果，如Wikipedia和Facebook [英] How to make a hover effects like Wikipedia and Facebook
问题描述
我正在尝试使用SVG和Wikipedia和Facebook之类的JavaScript产生悬浮卡效果. 但是在元素上悬停时如何固定顶部三角形的位置. 我需要修复三角形的位置以及像Wikipedia或Facebook这样的悬停动作. (注意:我的css和js链接中存在一些问题.我是一名新程序员，我想了解更多信息)，对不起.
I am trying to make a hovercard effect using SVG and JavaScript such as Wikipedia and Facebook. but how to fix the top triangle position when hovering on elements. I need to fix the triangle position and the hovering action like Wikipedia or facebook. (NOTE: I have some problem in my css and js link. I am a new programmer, I want to learn more), Sorry for that.
<!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"将显示所有信息
when you hover on any <a> it will be show all the info by using the link addr "/wiki/mark" or "/wiki/you"
#我们不需要每次都分配所有信息！
推荐答案
您可以使用Bootstrap框架来达到这种效果.这很容易！
您连接js和CSS Bootstrap 文件，然后连接Poper.js(在在同一页面上)，您可以将Bootstrap元素复制到您的项目中，然后根据需要使用它.
您可以在此链接中看到元素本身.这称为工具提示.
You can use the Bootstrap framework for such an effect. It is very easy!
You connect js and css Bootstrap files, connect the Poper.js (on the same page) and you can just copy the Bootstrap elements to your project and use it as you want.
You can see the element itself at this link. It is called a tooltips.
这篇关于如何制作悬停效果，如Wikipedia和Facebook的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
