Question

我有一个带图像的div。

悬停时，我想让图片更大，并在div旁边显示一些文字。

我希望在第一次转换（使图像变大）结束后显示文本。

我尝试过很多东西，但没有找到任何解决办法，这是我的最后一次尝试：

.width-12 {
  width: 100%;
  height: 100%;
}
.change-hover {
    width: 10%;
    transition: all 1s;
    float: left;
}

.show-hover {
    display: none;
    text-align: left;
    opacity: 0;
    transition: opacity 0s;
}

.discover-no-hover:hover .change-hover {
    width: 24%;
    float: left;
}

.discover-no-hover:hover .show-hover {
    display: block;
    opacity: 1;
    transition-delay: 1s;
}

<div class="width-12 discover-no-hover">
                    <div class="box small bkg-white">
                        <div class="feature-column medium mb-50 center hover-align">
                            <div class="iconcool">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg"
                                     alt="" class="img-responsive change-hover">
                            </div>
                            <div class="show-hover">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis. Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante.
                            </div>
                        </div>
                    </div>
                </div>

JSfiddle for those who don't like the snippet

如何在图像停止生长后才显示文本？（或者1s之后，图像的持续时间是多少？）

谢谢！

Answer 1

你有

<div class="wrap">
  <a id="circle1">
    <span class="tooltip">Tooltip, baby, yeah!</span>
  </a>
</div>

将此修改为

.show-hover { display: none; text-align: left; opacity: 0; transition: opacity 0s; /* this*/ }

＆＃13;

transition: 0s opacity 1s;

＆＃13;

.width-12 {
  width: 100%;
  height: 100%;
}

.change-hover {
  width: 10%;
  transition: all 1s;
  float: left;
}

.show-hover {
  display: block;
  text-align: left;
  opacity: 0;
  transition: 0s opacity 1s;
}

.discover-no-hover:hover .change-hover {
  width: 24%;
  float: left;
}

.discover-no-hover:hover .show-hover {
  display: block;
  opacity: 1;
  transition-delay: 1s;
}

＆＃13;

转换延迟文本不透明度

1 个答案: