CSS过渡悬停在父级上对子级的影响答案

【问题标题】：CSS transition hover on parent effect on childCSS过渡悬停在父级上对子级的影响
【发布时间】：2017-12-07 00:18:47
【问题描述】：

我正在尝试为内部按钮设置动画，但由于某种原因它不起作用。按钮的宽度应该向左缩小到 0

HTML

<div class="siteBtnShare">
    <div class="share-text-wrapper">
        <span class="share-text">SHARE</span>
    </div>
</div>

SCSS

.siteBtnShare  {
position: relative;
display: inline-block;
font-family: 'Novecentosanswide-Medium';
width: 40px;
transition: width 1s;
overflow:hidden;

.share-text-wrapper{
    width: 40px;
    display: inline-block;
}

&:hover .share-text-wrapper{
    width: 0;
}

}

编辑： - 按钮内部应该缩小到 0，但它没有做任何事情。它仍然可见

【问题讨论】：

在什么情况下不起作用？
你想如何通过悬停、点击来动画它？
悬停。而且我它不以它不做任何事情的方式工作。里面的文字仍然可见

标签： html css sass

【解决方案1】：

宽度确实缩小了，你只是看不到它，因为文本在容器之外流动：

.siteBtnShare  {
position: relative;
display: inline-block;
font-family: 'Novecentosanswide-Medium';
width: 40px;
transition: width 1s;
overflow:hidden;
}

.share-text-wrapper{
    width: 40px;
    display: inline-block;
    overflow: hidden;
}

.siteBtnShare:hover .share-text-wrapper{
    width: 0;
}

<div class="siteBtnShare">
    <div class="share-text-wrapper">
        <span class="share-text">SHARE</span>
    </div>
</div>

SCSS 中的工作代码：

.siteBtnShare  {
position: relative;
display: inline-block;
font-family: 'Novecentosanswide-Medium';
width: 40px;
transition: width 1s;
overflow:hidden;

.share-text-wrapper{
    width: 40px;
    display: inline-block;
    overflow: hidden;
}

&:hover .share-text-wrapper{
    width: 0;
}

}

【讨论】：

【解决方案2】：

试试这个，不带 FontAwesome 图标或根据您的喜好使用。

SCSS

.siteBtnShare {
    background: #eee;
    display: inline-block;
    padding: 10px;
    height: 20px;
    width: auto;
  color: #333;
    &:hover {
        .share-text-wrapper {
            .share-text {
                width: 100%;
            }
        }
    }
}
.label {
    display: inline-block;
    width: 1em;
  color: #888;
}
.share-text-wrapper {
    display: inline-block;
    white-space: nowrap;
    margin-left: -1em;
    padding-left: 1em;
    .share-text {
        display: inline-block;
        width: 0%;
        overflow: hidden;
        -webkit-transition: width 1s ease-in-out;
        -moz-transition: width 1s ease-in-out;
        -o-transition: width 1s ease-in-out;
        transition: width 1s ease-in-out;
    }
}

HTML

<div class="siteBtnShare">
    <span class="label"><i class="fa fa-share-alt" aria-hidden="true"></i></span>
    <div class="share-text-wrapper">
        <div class="share-text">
            Share It Out
        </div>
    </div>
</div>

JSFiddle：https://jsfiddle.net/Jabideau/3bo4zxgc/

【讨论】：