Изображение с полным описанием при наведении на организационную диаграмму - PullRequest
Новая
       29

Изображение с полным описанием при наведении на организационную диаграмму

0 голосов
/ 04 сентября 2018

Я хочу навести указатель мыши на блок организационной диаграммы и получить изображение с полным описанием. Тем не менее, изображение не выскакивает и описание также в прямой линии с именем. Какие-нибудь мысли? Спасибо.

Это моя кодировка. Я пытаюсь сделать это как этот сайт ПРИМЕР САЙТА . Возможно ли это сделать? 

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

1 Ответ

0 голосов
/ 04 сентября 2018

Что вы можете сделать, это сделать модальный JavaScript, и я буду использовать измененный трюк из этого урока :

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

Ты в порядке!

...