-2

ID を持つ img を持つ div があり、その中に別の 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は何ですか?

4

2 に答える 2

0

これを行う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/

于 2013-09-21T21:44:52.993 に答える