html - 在链接鼠标悬停事件上显示文本

Question

我正在研究这个元素 http://zag-test.nowcommu.myhostpoint.ch/

我现在需要的是当您将鼠标悬停在不同的“时间”上时的“悬停效果”。我需要在固定位置显示文本。我该怎么做？在这里您可以看到屏幕截图和 HTML/CSS

HTML

<div class="component">

            <!-- Start Nav Structure -->
            <button class="cn-button" id="cn-button"></button>
            <div class="cn-wrapper" id="cn-wrapper">
                <ul>
                    <li><a href="#" class="primo"><span>07.45 Uhr</span></a></li>
                    <li><a href="#" class="secondo"><span>07.55 Uhr</span></a></li>
                    <li><a href="#" class="terzo"><span>08.15 Uhr</span></a></li>
                    <li><a href="#" class="quarto"><span>08.17 Uhr</span></a></li>
                    <li><a href="#" class="quinti"><span>10.47 Uhr</span></a></li>
                    <li><a href="#" class="sesto"><span>13.20 Uhr</span></a></li>
                    <li><a href="#" class="settimo"><span>16.30 Uhr</span></a></li>
                 </ul>

            </div>
            <!-- End of Nav Structure -->

        </div>

CSS

.component {
position: relative;
margin-bottom: 2em;
height: 15em;
font-family: 'Lato', Arial, sans-serif;
transform: scale(1.1) !important;
margin-top: 90px; }

编辑(CSS)

.csstransforms .cn-wrapper li {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
margin-top: -1.3em;
margin-left: -10em;
width: 10em;
height: 10em;
font-size: 1.5em;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: rotate(76deg) skew(60deg);
-moz-transform: rotate(76deg) skew(60deg);
-ms-transform: rotate(76deg) skew(60deg);
transform: rotate(76deg) skew(60deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
pointer-events: none;}

.csstransforms .cn-wrapper li a {
position: absolute;
right: -7.25em;
bottom: -7.25em;
display: block;
width: 14.5em;
height: 14.5em;
border-radius: 50%;
background: #000;
background: -webkit-radial-gradient(transparent 35%, #000 35%);
background: -moz-radial-gradient(transparent 35%, #000 35%);
background: radial-gradient(transparent 35%, #000 35%);
color: #f9d70a;
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: 2;
-webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
-moz-transform: skew(-60deg) rotate(-75deg) scale(1);
-ms-transform: skew(-60deg) rotate(-75deg) scale(1);
transform: skew(-60deg) rotate(-75deg) scale(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: auto; }

.csstransforms .cn-wrapper li a:hover,
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
background: -webkit-radial-gradient(transparent 35%, #f9d70a 35%);
background: -moz-radial-gradient(transparent 35%, #f9d70a 35%);
background: radial-gradient(transparent 35%, #f9d70a 35%);
color: #000; }

.csstransforms .cn-wrapper li a:focus {
position: fixed; /* fix the displacement bug in webkit browsers when     using tab key */
}

.csstransforms .opened-nav li {
-webkit-transition: all .3s ease .3s;
-moz-transition: all .3s ease .3s;
transition: all .3s ease .3s;
}

.csstransforms .opened-nav li:first-child {
-webkit-transform: rotate(-20deg) skew(60deg);
-moz-transform: rotate(-20deg) skew(60deg);
-ms-transform: rotate(-20deg) skew(60deg);
transform: rotate(-20deg) skew(60deg);
}

 .csstransforms .opened-nav li:nth-child(2) {
-webkit-transform: rotate(12deg) skew(60deg);
-moz-transform: rotate(12deg) skew(60deg);
-ms-transform: rotate(12deg) skew(60deg);
transform: rotate(12deg) skew(60deg);
}

.csstransforms .opened-nav  li:nth-child(3) {
-webkit-transform: rotate(44deg) skew(60deg);
-moz-transform: rotate(44deg) skew(60deg);
-ms-transform: rotate(44deg) skew(60deg);
transform: rotate(44deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(4) {
-webkit-transform: rotate(76deg) skew(60deg);
-moz-transform: rotate(76deg) skew(60deg);
-ms-transform: rotate(76deg) skew(60deg);
transform: rotate(76deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(5) {
-webkit-transform: rotate(108deg) skew(60deg);
-moz-transform: rotate(108deg) skew(60deg);
-ms-transform: rotate(108deg) skew(60deg);
transform: rotate(108deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(6) {
-webkit-transform: rotate(140deg) skew(60deg);
-moz-transform: rotate(140deg) skew(60deg);
-ms-transform: rotate(140deg) skew(60deg);
transform: rotate(140deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(7) {
-webkit-transform: rotate(172deg) skew(60deg);
-moz-transform: rotate(172deg) skew(60deg);
-ms-transform: rotate(172deg) skew(60deg);
transform: rotate(172deg) skew(60deg);
}

  .no-csstransforms .cn-wrapper {
   overflow: hidden;
  margin: 10em auto;
  padding: .5em;
  text-align: center;
  }

 .no-csstransforms .cn-wrapper ul {
  display: inline-block;
  }

 .no-csstransforms .cn-wrapper li {
 float: left;
 width: 5em;
 height: 5em;
 background-color: #fff;
 text-align: center;
 font-size: 1em;
 line-height: 5em;
 }

  ## Heading ## .no-csstransforms .cn-wrapper li a {
     display: block;
     width: 100%;
     height: 100%;
     color: inherit;
     text-decoration: none;
     }

 .no-csstransforms .cn-wrapper li a:hover,
 .no-csstransforms .cn-wrapper li a:active,
 .no-csstransforms .cn-wrapper li a:focus {
background-color: #f8f8f8;
}

.no-csstransforms .cn-wrapper li.active a{
background-color: #6F325C;
color: #fff;
}

  .no-csstransforms .cn-button {
   display: none;
  }

Answer 1

您将需要 jQuery 将数据属性插入列表下方的 div 中。

您需要将其与您自己的元素相匹配，但使用绝对位置，您可以将其定位在您想要的位置。

将 data-tip="" 文本更改为所需的文本输出。

$('li span').hover(function() {
  var $tip = $(this).data('tip');
  $('#showtip').toggleClass('show').text($tip);
});

#showtip {
  display: none;
  padding: 1em 2em;
  border: 1px solid red;
}
#showtip.show {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li><a href="#" class="primo"><span data-tip="display1">07.45 Uhr</span></a>
  </li>
  <li><a href="#" class="secondo"><span data-tip="display2">07.55 Uhr</span></a>
  </li>
  <li><a href="#" class="terzo"><span data-tip="display3">08.15 Uhr</span></a>
  </li>
  <li><a href="#" class="quarto"><span data-tip="display4">08.17 Uhr</span></a>
  </li>
  <li><a href="#" class="quinti"><span data-tip="display5">10.47 Uhr</span></a>
  </li>
  <li><a href="#" class="sesto"><span data-tip="display6">13.20 Uhr</span></a>
  </li>
  <li><a href="#" class="settimo"><span data-tip="display7">16.30 Uhr</span></a>
  </li>
</ul>
<div id="showtip"></div>