Question

当你将鼠标悬停在底部时，我有3个div从底部生长。我试图让它成为文本出现在增长的部分。换句话说，我试图使其成为当用户将鼠标悬停在div上时，底部将向下扩展并显示一些文本。如果你看下面的代码，这将更有意义。

我已经尝试了我能想到的一切。创建一个包含文本的div，默认为高度0，然后随动画一起增长。使用jquery动态添加文本（最终看起来非常草率，我很难正确地格式化），并隐藏每个div下面的文本，不透明度为0，当你悬停时淡入（再次，它有点工作但我无法弄清楚如何让它看起来很漂亮）

下面的代码是悬停动画的基本代码，没有任何我向他们添加文本的丑陋尝试。我提前道歉，因为这可能不是很干净（我还在调整它）。

MY CODE (CODEPEN)

这是我的代码：

HTML

<div class="process-steps">
           <div class="process-column">    
                <h2>Design</h2>
                <h2><i class="fa fa-pencil-square-o fa-2x"></i></h2>
            </div>

            <div class="process-column">
                <h2>Develop</h2>
                <h2><i class="fa fa-code fa-2x"></i></h2>
            </div>

            <div class="process-column">
                <h2>Distribute</h2>
                <h2><i class="fa fa-check fa-2x"></i></h2>
            </div>
</div>

CSS：

$green: #4EDE96;
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

.process-steps
{
    margin: auto;
    width: 85%;
    text-align: center;
    background-color: white;
    height: 500px;

    .process-column
    {
        width: 28%;
        margin: 0 2%;
        min-height: 300px;
        background-color: $green;
        display: inline-block;
        text-align: center;
        border: 3px solid white;
        transition: 0.5s 0 ease;
        top: 0;

        h2
        {
            color: white;
            font-size: 50px;
        }

        &:hover
        {
            border: 3px solid $green;
            background-color: white;
            transition: 0.5s 0 ease;
            padding-bottom: 250px;

            h2
            {
                color: $green;
            }
        }
    }
}

的jQuery

//nothing worked :(

Answer 1

这个怎么样？

http://codepen.io/Leth0_/pen/meJCH

我不熟悉SCSS所以原谅我只使用CSS。我基本上切换父母悬停时添加的div的可见性状态。我也使用绝对定位来定位div。我会把剩下的部分留给你，但如果你有问题可以随意问，我希望这是你正在寻找的！

我也将父母的位置改为亲戚，以使他绝对定位工作。

<强> CSS

$green: #4EDE96;
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

.bottomText{
  position:absolute;
  bottom:0px;
    visibility:hidden;
}

.process-steps
    {
        margin: auto;
        width: 85%;
        text-align: center;
        background-color: white;
        height: 500px;

        .process-column
        {
            width: 28%;
            margin: 0 2%;
            min-height: 300px;
            background-color: $green;
            display: inline-block;
            text-align: center;
            border: 3px solid white;
            transition: 0.5s 0 ease;
            top: 0;
      position:relative;

            h2
            {
                color: white;
                font-size: 50px;
            }

            &:hover
            {
                border: 3px solid $green;
                background-color: white;
                transition: 0.5s 0 ease;
                padding-bottom: 250px;

                h2
                {
                    color: $green;
                }
            }
        }
    }

    .process-column:hover .bottomText{
      visibility:visible;
    }

<强> HTML

<div class="process-steps">
            <div class="process-column">
                <h2>Design</h2>
                <h2><i class="fa fa-pencil-square-o fa-2x"></i></h2>
            <div class="bottomText">This is a test!</div>
            </div>

            <div class="process-column">
                <h2>Develop</h2>
                <h2><i class="fa fa-code fa-2x"></i></h2>
            <div class="bottomText">This is a test!</div>
            </div>

            <div class="process-column">
                <h2>Distribute</h2>
                <h2><i class="fa fa-check fa-2x"></i></h2>
            <div class="bottomText">This is a test!</div>
            </div>
        </div>

无法弄清楚如何在悬停动画后使文字出现在div中

1 个答案: