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

Question

我想将鼠标悬停在组织结构图框上，并获得带有完整说明的图像。但是，图像不会弹出，并且描述也会在带有名称的直线中显示。有什么想法吗？谢谢。

这是我的编码。我试图使其像这个网站EXAMPLE OF THE WEBSITE。有可能做到吗？

THE IP ADDRESS OF YOUR RECEIVER

@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;
  }
}

Answer 1

您所能做的就是制作一个JavaScript模式，我将使用this tutorial中的修改技巧：

1：制作一个模式框-即制作一个<div>元素，其内容和位置以及您想要的任何内容。

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

你很好！