Jquery .hover（）でセレクタとしてdocument AND classを使用する方法

私は動的に追加されたコンテンツを持っているため、私のイベントのセレクタとして "document"を使う必要があります。Jquery .hover（）でセレクタとしてdocument AND classを使用する方法

$(document).hover(function(){ 
    //Do something 
}

私はセレクタとしてクラスを使用できるかどうかを知りたいですか？
は、私が試した：

$(document).hover('.liDoc', function(){ 
    $(this).children('.delDoc').css('color', 'red'); console.log($(this).children('.delDoc')) 
}, function() { 
    // on mouseout, reset the background colour 
    $(this).children('.delDoc').css('color', ''); 
});

この1つは動作しません！文書全体が目標のようだ。
.on()を使用すると、このようにすることができます...しかし.on('hover')は推奨されていませんか？

出典

2016-12-09 Björn C

それでも、廃止予定得たもの速記でした ' "のMouseEnter mouseleave"'使用することができますhttp://api.jquery.com/on/#additional-notes – arhak

あなたは例えば、型イベントによってmouseenter/mouseleaveイベントやフィルタを委任する必要があります。

$(document).on('mouseenter mouseleave', '.liDoc', function(e) { 
    $(this).children('.delDoc').css('color', e.type === "mouseenter" ? 'red' : ''); 
});

しかし、あなたの代わりにクラスを切り替えた方が良いだろう：CSSのある

$(document).on('mouseenter mouseleave', '.liDoc', function(e) { 
    $(this).children('.delDoc').toggleClass('colored'); 
});

を：

.delDoc.colored { 
    color: red; 
}

投稿したユースケースがシンプルな場合は、単にCSSを使用してください：

.liDoc:hover > .delDoc { 
    color: red; 
}

出典

2016-12-09 11:13:59

ありがとうございました。非常によく説明！ –

あなたが直接セレクタとしてのクラス名を使用することができ、コード

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("p").hover(function(){ 
 
     $(this).css("background-color", "yellow"); 
 
     }, function(){ 
 
     $(this).css("background-color", "pink"); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p>Hover the mouse pointer over this paragraph.</p> 
 

 
</body> 
 
</html>

出典

2016-12-09 11:14:36

ここでイベントを委任しないでください –

どのイベントですか？ –

OPは 'mouseenter/mouseleave'の省略形である' .hover（） 'メソッドを委譲したいと考えています。あなたの答えがどこに関係しているかわかりません –

下にしてみてください。

もちろん、これが機能するには、まずjQueryライブラリをインポートする必要があります。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min"></script>

すでにjQueryライブラリ（推奨）をダウンロードしている場合は、「src」値がファイルにつながるはずです。そうでない場合は、上記のURLで直接参照することができます。

そして今、あなたのjQueryコード

<script> 
    $(document).ready(function(){ 
     $(".liDoc").hover(function(){ 
      //mouse is in.. Do something 
      $(this).children(".delDoc").css("background","red"); 
     }, function(){ 
      //mouse is out.. Do something 
      $(this).children(".delDoc").css("background","transparent"); 
     }); 
    }); 
</script>

出典

2016-12-09 11:37:41 Walex996

Jquery .hover（）でセレクタとしてdocument AND classを使用する方法

答えて

関連する問題