隱藏加載並顯示在另一個div的懸停上顯示它

-2

我有一個div，其中包含id和其中另一個div的img 我想隱藏頁面加載時的信息div（您可以在代碼中看到）然後再次顯示它的IMG的懸停 - 我也想了信息的div向右滑動很好..提前感謝您的幫助:)隱藏加載並顯示在另一個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 protected] 
      </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？

來源

2013-09-21 avisaac

http://jsfiddle.net/AW9qh/像那樣？ –

這是被拒絕投票的原因是因爲在這個網站上已經有大量與這個主題相關的回答問題。這就是真棒，它是一個人們在野外遇到問題的活潑的互動wiki。不是你有人爲你編碼的地方。在問一個問題之前，我的問題是什麼？讓我們看看其他人是否有類似的問題。在你的情況下，答案肯定是肯定的。 – Swordfish0321

而不是編寫代碼讓你在一個簡單的問題上處理SO點，這裏的* real *答案是告訴你看看CSS語法和結構，特別是僞選擇器。這個概念非常簡單，在閱讀完一段後，你將能夠輕鬆回答自己的問題。 – Swordfish0321

下面是做到這一點的方法之一。我不知道這是你想要的，但既然你已經使用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-21 21:44:52 Andy

你的評論都有幫助（雖然Andy的評論更多的是我期待的效果）但是他們倆都讓div的位置發生了變化...... – avisaac

好吧我能夠修復postioning'非常感謝！ – avisaac

將您的.wrapper放在相同的圖像高度。放置一個overflow:hidden以隱藏正在其下的文本。

之後您必須更改.wrapper中的高度：懸停以顯示文本。

如果你想有一個很好的過渡，你可以調整與

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

這樣的：http://jsfiddle.net/AW9qh/2/

來源

2013-09-21 21:44:20

隱藏加載並顯示在另一個div的懸停上顯示它

回答

相關問題