suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery: Verwendung und Definition des MouseEnter-Ereignisses

jQuery: Verwendung und Definition des MouseEnter-Ereignisses

黄舟
黄舟Original
2017-06-28 09:41:511348Durchsuche

jQueryEreignis – Methode „mouseenter()“

Definition und Verwendung

Wenn der Mauszeiger durchläuft Beim Übergeben eines Elements tritt das Mouseenter-Ereignis auf.

Dieses Ereignis wird am häufigsten zusammen mit dem Mouseleave-Ereignis verwendet.

Die Methode „mouseenter()“ löst das Ereignis „mouseenter“ aus oder gibt eine Funktion an, die ausgeführt werden soll, wenn das Ereignis „mouseenter“ auftritt. 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").mouseenter(function(){//鼠标移入颜色改变
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){//鼠标移出颜色还原
    $("p").css("background-color","#E9E9E4");
  });
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
</html>

Hinweis: Im Gegensatz zum Mouseover-Ereignis wird das MouseEnter-Ereignis nur ausgelöst, wenn der Mauszeiger über das ausgewählte Element verläuft. Wenn der Mauszeiger über ein untergeordnetes Element fährt, wird auch das Mouseover-Ereignis ausgelöst. Sehen Sie sich das Beispiel unten für eine Demonstration an. 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
  $("p.over").mouseover(function(){
    $(".over span").text(x+=1);
  });
  $("p.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
  });
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<p class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</p>
<p class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonjQuery: Verwendung und Definition des MouseEnter-Ereignisses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lösung des Problems einer ungültigen jquery-Mousedown-Änderung des td-StilsNächster Artikel：Lösung des Problems einer ungültigen jquery-Mousedown-Änderung des td-Stils

In Verbindung stehende Artikel

Mehr sehen