如何将鼠标悬停在文本上以与触发文本处于相同的行高

Question

我想知道您能否告诉我如何将鼠标悬停在要放置在触发文本所在位置的文本上？截至目前，当您将鼠标悬停在触发文本上时，鼠标悬停在文本底部会淡入吗？

在这里摆弄：http://jsfiddle.net/kenhimself/yhhzy9vq/5/

CSS:

div.centered {
    font-size: 5vh;
}
span.ok {
    opacity:1;
}
span.ok:hover, span.ok:focus {
    opacity:0;
}
span.ok:hover + span.no {
    opacity:1;
}
span.no {
    opacity:0;
}
span.ok, span.no {
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -ms-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}
span {
    margin: 0 auto;
    display: table;
    font-size: 5vh;
    line-height: 1;
    white-space: nowrap;
}

Answer 1

尝试通过分配 position:relative 并给出 z-index:-1:

将 span.no 元素拉到顶部一点

span.no {
    opacity:0;
    position: relative;
    top: -27px;
    z-index: -1;
}

勾选DEMO

Answer 2

为 color 使用：伪元素和 rgba() 值并转换 color 属性而不是转换 opacity.

Updated Fiddle

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 100%;
  font-family: helvetica;
  font-weight: normal;
  font-style: normal;
}
div.centered {
  font-size: 5vh;
}
span.ok {
  position: relative;
  color: rgba(0, 0, 0, 1);
  -webkit-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}
span.ok:after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  transform: translateX(-25%);
  z-index: -1;
  color: rgba(0, 0, 0, 0);
  -webkit-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}
span.ok:hover:after {
  color: rgba(0, 0, 0, 1)
}
span.ok:hover {
  color: rgba(0, 0, 0, 0);
}
span {
  margin: 0 auto;
  display: table;
  font-size: 5vh;
  line-height: 1;
  white-space: nowrap;
}

<div class="centered">
  <span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
  <span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
  <span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
  <span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
  <span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
</div>

如何将鼠标悬停在文本上以与触发文本处于相同的行高

How to get hoverover text to be at the same line-height as the triggering text

html

css

alignment