将鼠标悬停在组织结构图上时带有完整描述的图像

Question

I want to hover my mouse over an organization chart box and have the image with full description.我想将鼠标悬停在组织结构图框上，并获得带有完整描述的图像。 However, the image do not pop out and the description also in the straight line with the name.但是，图像不会弹出，并且描述也在与名称的直线中。 Any thoughts?有什么想法吗？ Thank you.谢谢你。

This is my coding.这是我的编码。 I try to make it like this website EXAMPLE OF THE WEBSITE .我试着让它像这个网站的例子。 Is it possible to do it?有可能做到吗？

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: ; background-color: #f1f1f1; -webkit-font-smoothing: antialiased; } .box-row { text-align: center; } .box { border: 4px solid #000000; height: 80px; width: 286px; display: inline-block; top: 46px; } .box:hover { box-shadow: 8px 8px 9px -4px rgba(0, 0, 0, 0.1); width: 296px; top: 36px; } .bar { width: 30px; transform: rotate(90deg); margin: 13px auto 13px auto; border: 2px solid #000000; } .bar2 { width: 84px; transform: rotate(90deg); margin: 39px auto -6px auto; border: 2px solid #000000; } .horizontal-bar { display: inline-block; width: 35px; margin-bottom: 20px; margin-left: -6px; margin-right: -5px; border: 2px solid #000000; } .box-group { display: inline-block; width: 48%; } .second { margin: 8px 10px; } .second-separator { width: 629px; margin-bottom: 55px; margin-right: 344px; border: 2px solid #000000; } .vertical-bar { width: 176px; margin-bottom: -55px; margin-top: 27px; transform: rotate(90deg); border: 2px solid #000000; } /* setup tooltips */ .tooltip { position: relative; } .tooltip:before, .tooltip:after { display: block; opacity: 0; pointer-events: none; position: absolute; } .tooltip:after { border-right: 6px solid transparent; border-bottom: 6px solid rgba(0, 0, 0, .75); border-left: 6px solid transparent; content: ''; height: 0; top: 20px; left: 20px; width: 0; } .tooltip:before { background: rgba(0, 0, 0, .75); border-radius: 2px; color: black; content: attr(data-title); font-size: 14px; padding: 6px 10px; top: px; white-space: nowrap; height: 300px; width: 300px; position: absolute; left: 50%; transform: translate(-50%, -50%); background: white; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3); } /* expand */ .tooltip.expand:before { transform: scale3d(.2, .2, 1); transition: all .2s ease-in-out; } .tooltip.expand:after { transform: translate3d(0, 6px, 0); transition: all .1s ease-in-out; } .tooltip.expand:hover:before, .tooltip.expand:hover:after { opacity: 1; transform: scale3d(1, 1, 1); } .tooltip.expand:hover:after { transition: all .2s .1s ease-in-out; } @media screen and (max-width: 500px) { .header a { float: none; display: block; text-align: left; } .header-right { float: none; } }

 <!DOCTYPE html> <html> <head> <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1"> <link href='https://fonts.googleapis.com/css?family=Roboto:300italic,400italic,400,100,300,600,700' rel='stylesheet' type='text/css'> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <div class="row"> <div class="column" style="background-color:#;"> <h2>STRUCTURE</h2> <br> <br> <br> <div class="box-row"> <div> <div class="box"> <div class="tooltip expand" data-title="Aiman Iskandar - Monitor all the operation in the CTS Division"> <p>Vice President</p> <p>Business Technology</p> <p>aiman iskandar</p> </div> <hr class="bar" /> </div> <div> <div class="box"> <p>Head</p> <p> Consulting & Technology Services</p> <p>aidil iman</p> </div> <hr class="bar2" /> </div> <br /> <br /> </div> </div> </div> <br> </body> </html>

Answer 1

What you can do is make a JavaScript modal, and I'll use a modified trick from this tutorial :您可以做的是创建一个 JavaScript 模式，我将使用本教程中的修改技巧：

1: Make a modal box - that is, make a <div> element with the content and positioning and whatever you want. 1：制作一个模态框——也就是说，制作一个带有内容和定位以及你想要的任何内容的<div>元素。

2: Make a JavaScript <script> element, and inside it place this code: 2：创建一个 JavaScript <script>元素，并在其中放置以下代码：

document.getElementById("nameBox").onmouseover = showModal;
document.getElementById("nameBox").onmouseout = hideModal;

function showModal() {
    document.getElementById("modalBox").style.display = block;
}

function hideModal() {
    document.getElementById("modalBox").style.display = none;
}

You're good to go!你可以走了！

将鼠标悬停在组织结构图上时带有完整描述的图像

问题描述

1 个解决方案

解决方案1
0 2018-09-04 02:13:39

将鼠标悬停在组织结构图上时带有完整描述的图像

问题描述

1 个解决方案

解决方案1 0 2018-09-04 02:13:39

解决方案1
0 2018-09-04 02:13:39