-1

次の HTML コードがあります。

<div id="container">
<ul>
<li><img src="#" /></li>
<li><img src="#" /></li>
</ul>
<h2>Some Text</h2>
</div>

私が望むのは、単に ul の画像の 1 つにカーソルを合わせて、h2 フィールドのテキストを変更することです。jQuery、javascript、css のいずれで行うかは問題ではありませんが、できるだけシンプルにする必要があります。

そして、私が理解できるように、コメントでコードを説明してください!

ありがとうございました！

4

3 に答える 3

1

わかりました、jquery はこれを簡単に行います:

//mouseover any li tag and do the following
$("img").hover(function(){
     //get the html code in teh li
     var text = $(this).attr("src");
     //put that in any or all h2 tags
     $("h2").text(text);
});


$("img").mouseout(function(){
     $("h2").html("");        
});
于 2013-02-11T00:38:56.243 に答える
0

hover()jQuery で関数を使用して、ユーザーがいつ上にカーソルを置いたかを検出できimgます。

$('ul li img').hover(function() {
   $('h2').text('Some more text'); // set whatever text you want here
});

jsFiddle: http://jsfiddle.net/ZLtqQ/

于 2013-02-11T00:41:12.773 に答える
0

これで問題が解決すると思います。

$("#container").find("img").each(function(){  //look for each img inside the #container div
  $(this).mouseover(function(){ // and when the mouse is over it
     $("h2").html($(this).attr("src")); // put the img source as h2 text
  })
})

ヒント: h2 に id を入れて、スクリプトが必要な h2 だけに値を入れるようにします。お楽しみください :)

于 2013-02-11T00:44:06.477 に答える