2012-03-22 23 views
2

こんにちは私はそれに4つの画像を持つコンテナdivを持っています。私はコンテナにホバーイベントを設定して、コンテナの上にマウスを置くと、そのコンテナ内のどのイメージが現在ホバリングされているかを教えてくれます。これを行う方法はありますか?私は$(".container img").hover()のようにイメージ上でホバーイベントを行うことができますが、それは私がする必要があるためには機能しませんので、コンテナのホバーイベントから作業する必要があります。jQueryマウスが現在マウスオーバーしている子要素を取得

+0

imgのホバーは機能しません。必要な振る舞いの完全な説明はHTMLのように役立ちます....あなたは何を試しましたか? – charlietfl

答えて

2

私はjsfiddleを使用してサンプルを作成し、あなたはそれはあなたが望むものであるかどうかを確認することができました。

$(".container").on("hover", "img", function(e){ 
    var $target = $(e.currentTarget); 
    $out.html($target.attr("src")); 
}) 
0

これを試してみてください。イメージの代わりにDivsので、私はテストするのが簡単でした。 :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
      $('div').hover(function() { 
       $('#out').html($(this).attr('tag')); 
      }) 
     }); 
    </script> 
    <style type="text/css" media="screen"> 
     div { height: 40px; margin: 10px; border: 2px solid #ddd; } 
    </style> 
</head> 
<body> 
<div id="name1" tag="one">hey</div> 
<div id="name2" tag="two">hey2</div> 
<div id="name3" tag="three">hey3</div> 
<div id="name4" tag="four">hey4</div> 
<p id="out"></p> 
</body> 
</html> 
0

「mouseover」を使用してください。例:http://jsfiddle.net/d4gMS/

$('#container').on('mouseover', function(ev) { 
    var src = ev.originalEvent.srcElement; 
    if (src.id !== 'container') { 
     $('#out').html('hovering ' + ev.originalEvent.srcElement.id); 
    } 
});​ 
関連する問題