最も単純なロールオーバー/ホバーのテクニック

Question

JQueryやCSSの基本的なロールオーバアクションについての現在の最良の方法を知りたいのですが、興味がありますか？

私はロールオーバー、これらの状態としたい：

• ノーマル：テキストの段落はフェードアウト、写真、テキスト
と同じ位置に、フェードイン：DIV
• ホバー内のテキストの段落
• ONMOUSEOUT：写真は、テキストが戻ってフェードイン、フェードアウト

DIV &写真は両方知らサイズです。

オンラインで見つかったロールオーバー効果の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; 
} 

Answer 1

他の人が言っているように、ブラウザ間の互換性のために、jQueryを使用する方法があります。しかし、ちょうどCSSを望むなら、ここではトランジションを使って素早く汚れたCSS3オプションがあります。http://jsfiddle.net/wkhQA/2/

編集：怠け者のため、私はトランジションのためのウェブキットプレフィックスだけを含んでいました。だから私はクロムやサファリでそれをテストすると思います。謝罪。

Answer 2

、jQueryのは、移動するための方法となります。さらに、ホバーでスタイルを変更するよりも少し複雑に思えます。たとえば、写真のフェードインを段落のフェードインの最後にバインドしているとします。純粋なCSSでこれを達成する方法はありません。

Answer 3

要素をフェードイン/アウトする必要がある場合は、通常jqueryを使用します。私のCSSのようなものに行くだろうと後

<div id="box"> 

    <div class="box-img"> 

     <img src="image.jpg"/> 

    </div> 

    <div class="box-text"> 

     Lorem ipsum 

    </div> 

</div> 

：：私のHTMLはこのようなものになるだろう

#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"); 
    } 
); 

これが最適な方法ではないかもしれないが、私は後ろの目安を想定可能なことはどこかにあります。

.hover（）の表示はjQuery APIです。デモには、あなたが探しているものに似た何かのライブサンプルがあり、別の方法を採用しています。

希望すると便利です。 =）