マウスがjqueryの要素上にあるかどうかを確認する方法-jsチュートリアル-php.cn

マウスがjqueryの要素上にあるかどうかを確認する方法

藏色散人

リリース： 2022-12-30 11:11:19

オリジナル

5032 人が閲覧しました

マウスが要素上にあるかどうかを判断するための Jquery メソッド: 1. マウスが要素上にあるかどうかを判断するには、mouseover メソッドを使用します; 2. 要素上にマウスがあるかどうかを判断するには、mouseout メソッドを使用します。

マウスがjqueryの要素上にあるかどうかを確認する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.9.1 バージョン、Dell G3 コンピューター。

推奨: jQuery チュートリアル

jquery では、mouseover() メソッドと Mouseout() メソッドを使用して、マウスが要素上にあるかどうかを判断できます。

jquery は、マウスが要素上にあるかどうかを決定します

マウスポインタが要素上にあるとき、mouseover イベントが発生します。マウスポインタが要素から離れると、mouseover イベントが発生します。、マウスアウトが発生するイベント。

PS:mouseenter/mouseleave イベントとは異なり、mouseover/mouseout イベントは、マウスポインターが選択した要素または子要素に出入りするかどうかに関係なくトリガーされます。 Mouseenter/mouseleave イベントは、マウスポインターが選択された要素に出入りするときにのみトリガーされます。

$("#aijquery").mouseover(function(){
    $(".primary").text("方法二：鼠标在这个DIV元素里");
}).mouseout(function(){
    $(".primary").text("方法二：鼠标不在这个DIV元素里");
});

ログイン後にコピー

デメリット: ページが初期化されているとき、つまりページを開いたばかりのときは判定できず、マウスを一度 div 上に移動させ、mouseover イベントをアクティブにすることでのみ判定できます。詳細については、上記のオンラインサンプルデモンストレーションを参照してください。

例:

<!doctype html>
<html>
<head>
<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
 href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body class="text-center p-5">
  <DIV class="border border-danger p-5">
    <Div id="aijquery" class="border border-dark p-3 alert-success">
      <span class="primary border border-dark">inifo</span><br>
    </Div>
  </DIV>
<script language="JavaScript">
$("#aijquery").mouseover(function(){
 $(".primary").text("鼠标在这个DIV元素里");
}).mouseout(function(){
 $(".primary").text("鼠标不在这个DIV元素里");
});
</script>
</body>
</html>

ログイン後にコピー

レンダリング:

マウスがjqueryの要素上にあるかどうかを確認する方法