css - 如何使 div 过渡在悬停时移动并显示新的 div

Question

我试图让子 div (.imagehead) 在父 div (#bite) 悬停时向左滑动(大约 25%)并显示另一个 div(名称未定，但我希望它是2-3 行文本)在 (.imagehead) 的右侧，相对于 (.imagehead) 所在的位置。

我已经有一段时间没有编码了，很抱歉，如果这非常简单而我无法解决这个问题。

这是代码本身(我搞砸了一个 tumblr 主题)

<div id="headbox">
<div class="top">
    <div class="nav">
        <div align="center">
            <BR/>
            <BR/>
                <div class="headimage"><img src="http://s24.postimg.org/gqgjloln9/head.png"></div>
                <div id="transitiontext">I want to show this when "headbox" is hovered on, moving "headimage" to the left 25% and revealing this text next to it</div>
            <BR/>
            <BR/>
        </div>
    </div>
</div>

#headbox {
top: 30px;
}

#headbox:hover .headimage {
left: 25%;
}

http://jsfiddle.net/bko87pk9/

Answer 1

• 图像被设为 position: absolute 以将其从正常流中移除。文本现在将显示在下方。

• 导航容器是 position: relative 这样它的绝对子元素就会相对于它而不是 body 定位自己

• 图像在悬停时移动，transition 创建一个平滑的动画来显示文本

例子

示例 1

在此示例中，文本需要包含在与图像具有相同高度和宽度的框中，这样它就不会从下方露出。

.nav {
  height: 100px;
  position: relative;
}
.headimage {
  position: absolute;
  transition: left 0.5s;
  left: 0;
}
.nav:hover .headimage {
  left: 25%;
}
.transitiontext {
  width: 25%;
}

<div class="nav">
  <img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
  <div class="transitiontext">This text needs to be contained properly.</div>
</div>

例子2

在这个例子中，文本可以在下面溢出，因为它会被 opacity: 0 隐藏。悬停时，不透明度会更改为 opacity: 1 并平滑过渡。

不透明度值会改变文本 div 的 z 值，因此我们需要声明 z 索引值(较高的将显示在较低的顶部)

pointer-events: none 防止悬停在悬停隐藏文本时激活。

.nav {
  height: 77px;
  /* height of image */
  position: relative;
}
.headimage {
  position: absolute;
  transition: left 0.5s;
  left: 0;
  z-index: 2;
}
.nav:hover .headimage {
  left: 25%;
}
.transitiontext {
  width: 25%;
  transition: opacity 0.5s;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.nav:hover .transitiontext {
  opacity: 1;
}

<div class="nav">
  <img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">

  <div class="transitiontext">This text does not need to be contained as it will be hidden until the hover state is activated. This text does not need to be contained as it will be hidden until the hover state is activated.</div>


</div>