suchen

Heim >Web-Frontend >js-Tutorial >jQuery betreibt DIV, um Mouseover-Ereignisse zu binden (Code im Anhang)

jQuery betreibt DIV, um Mouseover-Ereignisse zu binden (Code im Anhang)

php中世界最好的语言
php中世界最好的语言Original
2018-06-04 15:30:312381Durchsuche

Dieses Mal bringe ich Ihnen jQuery zum Binden von Maus-Rollover-Ereignissen an DIVs (mit Code) Was sind die Vorsichtsmaßnahmen für jQuery, um Maus-Rollover-Ereignisse an DIVs zu binden? und schaut mal rein. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery响应鼠标实现p由下向上展开</title>
<style type="text/css">
  .big{position:relative; width:234px; height:300px; background:#ccc}
  .show{position:absolute; display:none; bottom:0px;display:block; width:100%; height:auto; background:#f66 }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
 {
  $(".big").hover(function () {
    $(".show").stop(true,true).animate({height:"70px"});
  }, function () {
    $(".show").stop(true,true).animate({height:"0px"});
  });
});
</script>
</head>
<body>
  <!--灰色的p-->
  <p class="big">
    <!--红色的p-->
    <p class="show"></p>
  </p>
</body>
</html>

Prinzip:

① Zuerst wird das rote p durch

position:absoluteabsolute Positionierung und durch positioniert relative und untere Positionierung, z. B. . bottom:0px② Die untere Positionierung ist fixiert und erweitert sich nach oben, wenn die Höhe höher wird.
③ Verwenden Sie die Animationsmethode
von jQuery, um die Höhenänderung des roten p zu steuern. $().animate()

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So drucken Sie Protokollinformationen von der Konsole aus

So verwenden Sie Vue zur Bedienung von DIV

Das obige ist der detaillierte Inhalt vonjQuery betreibt DIV, um Mouseover-Ereignisse zu binden (Code im Anhang). 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：So bedienen Sie CSS-Dateien mit r.jsNächster Artikel：So bedienen Sie CSS-Dateien mit r.js

In Verbindung stehende Artikel

Mehr sehen