Javascript 在加载时隐藏一个div，并在另一个div悬停时显示它

我有一个带id的img的div，里面还有另一个div 我想在页面加载时隐藏info div（您可以在代码中看到），然后在img悬停时再次显示它-我还希望info 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>  

---

我需要的jQuery是什么？

将您的

.wrapper

放置在相同的图像高度。放置一个

溢出：hidden

以隐藏下面的文本

之后，您必须在中更改高度。包装器：悬停以显示文本

如果你想要一个好的过渡，你可以用

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

像这样：

这里有一种方法。 我不知道这是否是您想要的，但由于您已经在使用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;
}

---

像这样吗？这项投票被否决的原因是，在这个网站上已经有大量与这个主题相关的问题被回答了。这就是为什么这么棒，它是一个活生生的互动维基，记录了人们在野外遇到的问题。不是一个有人为你编码的地方。在问问题之前，想一想，我的问题是什么？让我们看看其他人是否也有类似的问题。在你的例子中，答案肯定是肯定的。这里的真正答案是告诉你去研究CSS语法和结构，特别是伪选择器，而不是编写代码让你去农场。这个概念非常直截了当，读了一点之后，你将能够轻松地回答你自己的问题。谢谢箭鱼，但我已经尝试先找到答案，但我真的找不到我要找的东西。。我一定要检查伪选择器。（我真的是一个初学者，所以这里有无知=]）当然，我并不是想分散你提问的兴趣。但我想抢走你。这不仅是你当前问题的正确方向，也是你将来会遇到的问题的正确方向。你的两条评论都很有帮助（虽然安迪的评论更像是我所期待的效果），而且两条评论都改变了部门的位置。。。

.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;
}