Question

我试图在父div（#bite）悬停时向左边（约25％）滑动一个子div（.imagehead）并显示另一个div（Name未决定，但我希望它是（.imagehead）右侧的2-3行文本），相对于where（.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，以便其绝对孩子将自己定位于身体而不是身体
图像在悬停时移动，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-index值（较高的值将显示在较低的顶部）

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>

Answer 2

我很抱歉没有正常工作的代码，我在手机上对此感兴趣。

<div id="test">
Hover on this div.
</div>

#test {
height: 100px;
width: 200px;
background-color: #F1F1F1;
-webkit-transition: 
all 1s ease-in-out
all 1s linear;
-moz-transition:
all 1s ease-in-out
all 1s linear;
-ms-transition:
all 1s ease-in-out
all 1s linear;
-o-transition:
all 1s ease-in-out
all 1s linear;
transition:
all 1s ease-in-out
all 1s linear;
}
#test:after {
height: 100px;
width: 200px;
content: "Second div.";
display: none;
background-color: #F9F9F9;
position: absolute;
top: 0px;
left: 210px;
}
#test:hover:after {
display: block;
}

如何使div过渡移动并显示新的div

2 个答案:

实施例

示例1

示例2