Question

制作网络投资组合。我的名字周围有联系方式。当使用“transition”属性悬停图标时，文本的初始宽度为0。左边的图标工作正常，但右边的图标有一个奇怪的过渡，尤其是手机。

<div class="contactbox left">
    <a href="https://twitter.com/D4NiMG" class="contactchild" id="contacttwittertext">
        <span class="contacticon-twitter"></span>
        <span class="contacttext">@D4NiMG</span>
    </a>
    <a href="https://plus.google.com/+DaniMu%C3%B1ozGuardiola" class="contactchild" id="contactgoogleplustext">
        <span class="contacticon-google-plus"></span>
        <span class="contacttext">+DaniMu&ntilde;ozGuardiola</span>
    </a>
</div>
<span id="titlespan">Dani Guardiola</span>
<div class="contactbox right">
    <a href="mailto:d4nimg@gmail.com" class="contactchild" id="contactemailtext">
        <span class="contacticon-email"></span>
        <span class="contacttext">d4nimg@gmail.com</span>
    </a>
    <a href="tel:+34607017025" class="contactchild" id="contactphonetext">
        <span class="contacticon-phone"></span>
        <span class="contacttext">+34 607 01 70 25</span>
    </a>
</div>

CSS：

.contacttext {
    display: none;
    white-space: nowrap;
}
.contactchild:hover .contacttext {
    display: inline-block;
}
.contactchild  {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 32px;
    color: white;
    transition: width 0.3s;
}
#contacttwittertext:hover {
    transition: width 0.3s;
    width: 107px;
    color: #00aced;
}
#contactgoogleplustext:hover {
    transition: width 0.3s;
    width: 189px;
    color: #D34836;
}
#contactemailtext:hover {
    transition: width 0.3s;
    width: 175px;
    color: #8036d3;
}
#contactphonetext:hover {
    transition: width 0.3s;
    width: 154px;
    color: #6fd336;
}

Answer 1

手机的问题在于文字包装。设置

.contactchild { white-space: nowrap }

奇怪的重叠是由你的误用的位置：绝对引起的。摆脱它。用边距移动它，父母强迫nowrap。

奇怪的下划线与HTML中的空格有关。请参阅1 vs 2。它是<a>的下划线（注意空格）。

CSS宽度过渡的怪异

1 个答案: