0

ホバー時に画像に色を付けようとしています。また、削除アイコンを画像の上に表示したいのですが、直面している問題は、マウスが削除アイコンの上にあるときに、多くのイベントが継続的に発生することです。

ここにHTMLがあります

 <span class="imageContent" >
  <a  class="imgOverlay" href="http://4.bp.blogspot.com/-yAOYE3-J1mo/TmsnBJ6ucYI/AAAAAAAABcA/5ZKqEv3p-6I/s1600/36676-sky_blue.jpg" target="_blank" >
       <img src="http://4.bp.blogspot.com/-yAOYE3-J1mo/TmsnBJ6ucYI/AAAAAAAABcA/5ZKqEv3p-6I/s1600/36676-sky_blue.jpg" />
   </a>
    <a href="" name="deleteImg" class="delete">delete</a>
 </span>

そしてここにjsがあります

 $(".imgOverlay > img").hover(function(e){

    $(this).fadeTo("fast",0.3);
    $('.delete').css('display','inline-block');
},function(e){

    $(this).fadeTo("fast",1.0);
    $('.delete').css('display','none');
});

$(".imgOverlay > .delete").hover(function(e){


    $('.delete').css('display','inline-block');
},function(e){ 
    $('.delete').css('display','none');
});


$('.imgOverlay .delete').click(function(e){
  alert('click');
});

これが実際の例です http://jsbin.com/asehuq/1/edit

4

3 に答える 3

2

このコードを試してください：

$(".delete").hover(function (e) {
  //e.stopPropagation(); <----this is not required because your element is not 
  //                          the child of the ".imgOverlay"
  e.preventDefault();

  $('.delete').css('display', 'inline-block');
}, function (e) {
  $('.delete').css('display', 'none');
});


$('.delete').click(function (e) {
  alert('click');
});

実際、問題の原因となった両方のアイテムにイベントをバインドしています。

私が意味するのはこれを見ることです：

$(".imgOverlay > .delete").hover(function(e){

マークアップによると.delete、の直接の子ではありません.imOverlay。

ここ：

$('.imgOverlay .delete').click(function(e){

クリックイベントを必須ではない両方の要素にバインドしています。

于 2013-01-08T07:39:29.510 に答える
0

.deletejavascript の代わりに css を使用して表示を制御できます。

.imageContent:hover .delete {
    display: inline-block;
}

次に、これを JavaScript に使用します。

$('.imageContent').hover(function(e){
    $(this).find('img').fadeTo("fast",0.3);
},function(e){
    $(this).find('img').fadeTo("fast",1.0);
});

$('.imageContent .delete').click(function(e){
    alert('click');
});

デモ

于 2013-01-08T07:41:49.240 に答える
0

あなたはそれらを試す必要があります：

  • ホバーの代わりに mouseenter と mouseleave を使用してください。

  • アニメーションを実行する前に stop を呼び出します

    $(this).stop(true).fadeTo("fast",0.3);

于 2013-01-08T07:38:43.543 に答える