Question

我有一个div，其中包含id和内部的另一个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中更改高度后：悬停以显示文本。

如果您想要一个漂亮的过渡，可以使用

进行调整

.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/

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

2 个答案: