如何在懸停時顯示文字？

Question

我發現這種效果在Flash中完成。有沒有類似的方法來解決這個JavaScript？ 看看下面的鏈接，然後將鼠標懸停在2013年

http://www.iflymagazine.com/?locale=no_en

Answer 1

Here is a very basic example:

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 

<div id='2'><span>2</span></div> 
<div id='0'><span>0</span></div> 
<div id='1'><span>1</span></div> 
<div id='3'><span>3</span></div> 

div{ 
    height:100px; 
    width:100px; 
    color: white; 
    background: red; 
    display:inline-block; 
    text-align:center; 
} 
span{ 
    font-size:125px; 
    line-height:-10px; 
} 

$(function() { 
    $('div').mouseenter(function() { 
     $(this).stop(true).animate({backgroundColor: 'white', color: 'red'}, 500, 'easeInQuint'); 
    }); 

    $('div').mouseleave(function() { 
     $(this).stop(true).animate({backgroundColor: 'red', color: 'white'}, 500, 'easeInQuint'); 
    }); 
}); 

它沒有你想要的幻燈片效果。要做到這一點，我想象你必須解決多個元素並將它們交換出來。

編輯：我又看你想要什麼，我做了this:

.wrapper{ 
    position:relative; 
    display:inline-block; 
    width:100px; 
    height:100px; 
} 
.number{ 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    height:100px; 
    width:100px; 
    color: white; 
    background: red; 
    display:inline-block; 
    text-align:center; 
    z-index:2; 
} 
.text{ 
    position:absolute; 
    display:inline-block; 
    z-index:1; 
    top:0px; 
    left:0px; 
    height:100px; 
    width:100px; 
    color: black; 
    background: gray; 
    font-size:8pt; 
} 
.spnNum{ 
    font-size:125px; 
    line-height:-10px; 
} 

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 

<div class='wrapper'> 
    <div class='number' id='2'><span class='spnNum'>2</span></div> 
    <div class='text' id='t2'> 
     <span> Text Goes in here to be displayed when the number is hidden</span> 
    </div> 
</div> 
<div class='wrapper'> 
    <div class='number' id='0'><span class='spnNum'>0</span></div> 
    <div class='text' id='t0'> 
     <span> Text Goes in here to be displayed when the number is hidden</span> 
    </div> 
</div> 
<div class='wrapper'> 
    <div class='number' id='1'><span class='spnNum'>1</span></div> 
    <div class='text' id='t1'> 
     <span> Text Goes in here to be displayed when the number is hidden</span> 
    </div> 
</div> 
<div class='wrapper'> 
    <div class='number' id='3'><span class='spnNum'>3</span></div> 
    <div class='text' id='t3'> 
     <span> Text Goes in here to be displayed when the number is hidden</span> 
    </div> 
</div> 

$(function() { 
    $('.number').mouseenter(function(){ 
     $(this).slideUp(200); 
    }); 

    $('.text').mouseleave(function(){ 
     $(this).prev().slideDown(); 
    }); 

}); 

它可以是一個有點馬車，如果你試圖太快的數字之間移動，這隻會變得更糟較慢動畫是。但它確實讓你真正接近我想要達成的目標。