Question

我已经看到了类似的问题，但解决方案对我如何使用span类没有用处。实际上，我使用span类作为悬停的替代文本。我想在悬停时放松/放松课程，但我无法弄清楚应用webkit的位置或我做错了什么。

HTML

<div class="mdmg2"><span class="alias">name</span> <span class="infor">age / tz / pm</span></div>

CSS

.mdmg2 { text-transform: lowercase; color: #fff; text-align: left; font-size: 40px; text-shadow: 1px 1px 0px black, 1px 1px 0px white, 1px 1px 0px black; }
.mdmg2 .infor { display: none; }
.mdmg2:hover .alias { display: none; }
.mdmg2:hover .infor { display: inline; font-size: 30px; text-transform: uppercase; font-family: montserrat; position: relative; top: -10px; }

Answer 1

解释

根据我的理解，您希望.alias 不悬停时显示.mdmg2，并且 .infor 徘徊。你想淡入两者之间。

您的问题

您无法为display属性设置动画，因此如果您想淡化内容，则不适合。但是，有一个名为opacity的CSS属性。这可以设置为0和1之间的任何小数，这对应于元素不透明的百分比值（即它的透明度）。

此属性可以设置动画，因此我们将display样式更改为使用opacity，并添加正确的代码以执行动画。尽管OP要求进行webkit转换，但转换没有供应商前缀（请参阅http://caniuse.com/#search=transition），因此该属性仅为transition。您可以阅读它的语法及其工作原理here。

现在，有一个动画悬停，但与display不同，使用不透明度，旧对象仍会占用页面上的空间;即两个spans不在同一个空间。这显然不对，因此要解决此问题，我们会在.alias（100px）上设置宽度。这样可以确保.alias 始终占用100px，这样我们就可以将.infor移到100px向右移动，以确保两个元素一致起来。

解决方案

因此，您问题的完整解决方案是：

＆＃13;

.mdmg2 {
  text-transform: lowercase;
  color: #fff;
  text-align: left;
  font-size: 40px;
  text-shadow: 1px 1px 0px black, 1px 1px 0px white, 1px 1px 0px black;
  position:relative;
}
.mdmg2 .infor {
  opacity:0;
  font-size: 30px;
  text-transform: uppercase;
  font-family: montserrat;
  transition:opacity 0.5s;
  position:relative;
  left:-100px;
}
.mdmg2 .alias {
  opacity:1;
  transition:opacity 0.5s;
  width:100px;
}
.mdmg2:hover .infor {
  opacity:1;
}
.mdmg2:hover .alias {
  opacity:0;
}

＆＃13;

<div class="mdmg2"><span class="alias">name</span> <span class="infor">age / tz / pm</span></div>

＆＃13;

将webkit过渡应用于跨类？

1 个答案:

解释

您的问题

解决方案