javascript - 在加载时隐藏一个 div 并在另一个 div 的悬停时显示它

Question

我有一个 div，其中有带有 id 的 img 和另一个 div 我想在页面加载时隐藏信息 div（你可以在代码中看到），然后在 img 悬停时再次显示它 - 我也想要信息 div很好地向右滑动..提前感谢您的帮助:)

HTML

        <div class="wrapper">
        <img id="logo" src="img/logo.png" alt="logo">
            <div id="info">
                info- blah <br> 
                blah &amp; blah .<br>
                email@gmail.com
            </div>
        </div>  

CSS

.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
  }
#logo {
        width: 39px;
}
.wrapper:hover{
    opacity: 0.6;
}
#info {
    margin-left: 2px;
    margin-top: 5px;
    float:right;
    font-size: 9px;
}

我需要什么 jQuery？

Answer 1

.wrapper以相同的图像高度放置您的。放置一个overflow:hidden以隐藏下面的文本。

在您必须更改 .wrapper:hover 中的高度以显示文本之后。

如果你想要一个漂亮的过渡，你可以调整它

.wrapper:hover{
    opacity: 0.6;
    height:100px;
    transition: height 1;
    -webkit-transition: height 1s; /* Safari */
}

像这样：http: //jsfiddle.net/AW9qh/2/

Answer 2

这是一种方法。我不知道这是否是您想要的，但由于您已经在使用 CSS3，因此您不需要 jQuery：

.wrapper {
    float: left;
    opacity: 0.4;
    margin-left: 5px;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    overflow:visible;
    position:relative;
}
.wrapper:hover {
    opacity: 0.6;
}
#info {
    margin-left: 2px;
    margin-top: 5px;
    float:right;
    font-size: 9px;
    opacity:0;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    left:50%;
    position:absolute;
    top:0;
}
.wrapper:hover #info {
    left:100%;
    opacity:1;
}

http://jsfiddle.net/Y2B2v/