文の上にカーソルを置いてその文章を入力しようとしています

Question

文章の中の一意の文の上にユーザーが移動したときに、もう1人はスライドして）現在の文章イメージを表示する。何かの上を浮遊していないときは、ホーム画像がデフォルト画像として表示されます。また、文章は新しい行になるように構成されておらず、一部は改行されます（これを変更することはできません）。

写真を投稿できませんが、できるだけ詳しく説明しました。

これはどのように構成しますか？私は、divの中にスパンタグを使用して、独特の文章を識別して、そのスパンの背景色とイメージイベントを設定することができますか？

解決策を教えてください。ありがとうございました。

Answer 1

私の最初の傾向はそうです。特定のテキスト部分を<span>にラップする必要があります（その周囲のテキストを除いて）。意味論的にも、それは最も理にかなっている。あなたは望みの効果と結びつけるのに使うことができるいくつかの種類のIDをスパンに与えなければなりません。

大雑把に、あなたのマークアップは次のようになります。

<p>This is your before your sample sentence. <span id="hover_1">This IS your sample sentence.</span> <span id="hover_2">This is yet another sample sentence.</span> This is after your sample sentence.</p> 
<div id="images"> 
    <img src="http://farm8.staticflickr.com/7171/6717705777_268acd6b2a_m.jpg" id="original" /> 
    <img src="http://farm8.staticflickr.com/7014/6717705405_80e172b437_m.jpg" id="hover_1_pic" /> 
    <img src="http://farm8.staticflickr.com/7144/6717706163_68e9b6f0d4_m.jpg" id="hover_2_pic" /> 
</div> 

今、あなたは、いくつかのCSSをする必要があります：

span { background: yellow; cursor: pointer;} 
#images img { display: none; } 
#images #original { display: block; } 

次に、あなたのjQueryのは、このようなものになります：

$('span').hover( 
function(){ 
    var thisId = $(this).attr('id'); 
    $('#images img').stop().fadeOut('fast'); 
    $('#' + thisId + '_pic').delay(300).fadeIn('normal'); 
}, 
function(){ 
    var thisId = $(this).attr('id'); 
    $('#' + thisId + '_pic').stop(true, true).fadeOut('fast',function(){ 
    $('#original').stop(true, true).fadeIn('normal'); 
    }); 
    $('#original').stop(true, true).css('opacity', 1); 
} 
); 

を

このページでどのくらいの数の文章を予定しているのか、またいくつのページがあるかわからないので、仕事をする必要がありますjQueryセレクタを少しスマートにすることについて。

ライブ、それを参照してください：http://jsfiddle.net/chippper/mMw5x/