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

【问题标题】：Hide a div on load and showing it on hover of another div在加载时隐藏一个 div 并在另一个 div 的悬停时显示它
【发布时间】：2013-09-21 21:34:07
【问题描述】：

我有一个 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？

【问题讨论】：

jsfiddle.net/AW9qh 这样吗？
之所以被否决，是因为该站点上已经有大量与此主题相关的已回答问题。这就是令人敬畏的原因，它是人们在野外遇到的问题的一个活生生的交互式维基。不是有人为您编写代码的地方。在提出问题之前想一想，我的问题是什么？让我们看看其他人是否有类似的问题。在你的情况下，答案肯定是肯定的。
而不是编写代码让你在一个简单的问题上获得 SO 点，这里的真正答案是告诉你研究 CSS 语法和结构，特别是伪选择器.这个概念非常简单，阅读后您将能够轻松回答自己的问题。
感谢 Swordfish，但我试图先找到答案，但我真的找不到我要找的东西。我一定会检查伪选择器。（我真的是一个初学者所以那里的无知=]）
当然，我并不想妨碍您提问。但是试图让你受苦我。正确的方向不仅适用于你当前的问题，也适用于你将来会遇到的问题。

标签： javascript jquery hover hide

【解决方案1】：

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

【讨论】：

你的两个 cmets 都有帮助（虽然 Andy 的评论更像是我想要的效果）但是他们两个都改变了 div 的位置......

【解决方案2】：

将您的.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/

【讨论】：