最簡單的翻轉/懸停技術

我很想知道人們認爲當前最好的方式來進行基本的翻轉操作--JQuery或CSS？最簡單的翻轉/懸停技術

我想翻車與這些狀態：

正常：文本段落一個DIV內
懸停：段落文字淡出，照片淡入，在相同的位置，文字
的onmouseout：照片淡出，文字淡化早在

DIV &照片都是已知的尺寸。

我在網上發現的CSS只有翻轉效果的90％是專門用於菜單，使用精靈，這不是我所追求的，其他10％是爭論是否：懸停是好的實踐。

我很好奇人們現在認爲最直接的技術 - 最少代碼，最不復雜，最兼容。

沒有側翻尚未加入，HTML是與此類似：

<div id="box1"> 
    <p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p> 
</div>

CSS是：

#box1 { 
    width:403px; 
    height:404px; 
    background-image:url('../images/bio_square1.jpg'); 
    background-repeat:no-repeat; 
    color:#fff; 
}

來源

2011-09-06 Ila

衰落效應尚未在瀏覽器中很好地建立起來，但其中大多數都在測試中。 – animuson

好的 - 淡化是這個過程中最不重要的部分，是一個很好的但不是必不可少的部分。因此，如果只有在精品瀏覽器中才有效，只要圖像滾動效果最佳，就可以。 – Ila

正如其他人所說的，爲了實現跨瀏覽器兼容性，jQuery是最好的選擇。但是，如果你只想CSS這裏是一個快速和骯髒的CSS3選項使用轉換：http://jsfiddle.net/wkhQA/2/

編輯：由於懶惰，我只包括轉換的webkit前綴。所以我想在Chrome或Safari中測試一下。道歉。

來源

2011-09-06 19:31:10 DuMaurier

我現在正在使用這種方法，它運行良好，謝謝！ – Ila

對於跨瀏覽器的兼容性，jQuery將是要走的路。此外，你想要的東西聽起來比簡單地改變懸停樣式複雜一點。例如，您正在將照片淡入淡入到段落淡入的末尾。在純CSS中無法實現這一點。

來源

2011-09-06 19:14:25 maxedison

我通常會訴諸jquery，如果有需要淡入/淡出元素。

我的HTML代碼將是這樣的：

<div id="box"> 

    <div class="box-img"> 

     <img src="image.jpg"/> 

    </div> 

    <div class="box-text"> 

     Lorem ipsum 

    </div> 

</div>

按照我的CSS會去是這樣的：

#box{ 
    width:500px; 
    height:500px; 
    padding:0; 
} 

    .box-img{ 
     position:absolute; 
     opacity:0; 
    } 

    .box-text{ 
     position:absolute; 
    }

，結束的時候，我可能會使用.mouseover jQuery庫（）或.hover（）：

$("#box").hover(
    function() { 
    $(".box-img").fadeTo("100,1"); 
    $(".box-text").fadeTo("100,0"); 
    }, 
    function() { 
    $(".box-img").fadeTo("100,0"); 
    $(".box-text").fadeTo("100,1"); 
    } 
);

這可能不是最佳方法，但我認爲背後的粗略想法有什麼可能的地方在那裏。

您可以在jQuery API處看到執行中的.hover（）。該演示中有一個類似於您可能正在尋找的事物的實例，它正在使用另一種方法。

希望這會有所幫助！ =）

來源

2011-09-06 19:23:45 vynx

最簡單的翻轉/懸停技術

回答

相關問題