jQuery操作DIV綁定滑鼠滑過事件（附程式碼）-js教程-PHP中文網

首頁

web前端

js教程

jQuery操作DIV綁定滑鼠滑過事件（附程式碼）

php中世界最好的语言

Jun 04, 2018 pm 03:30 PM

jquery 滑鼠

這次帶給大家jQuery操作DIV綁定滑鼠滑過事件（附程式碼），jQuery操作DIV綁定滑鼠滑過事件的注意事項有哪些，下面就是實戰案例，一起來看一下。

<!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>

登入後複製

原理：

① 首先紅色p是透過position:absolute絕對定位

#的，且透過相對與底部定位，如bottom:0px
。

② 底部定位固定，高度變高的時候就向上擴展了。 ###③ 使用jQuery的###$().animate()###動畫方法，控制紅色p高度變化。 ######相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########console怎麼列印日誌資訊################怎麼使用Vue操作DIV####### ##

以上是jQuery操作DIV綁定滑鼠滑過事件（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7716

Java教學

1641

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1232

Related knowledge

Win11怎麼停用工作列縮圖預覽? 關閉滑鼠移動工作列圖示顯示縮圖技巧 Feb 29, 2024 pm 03:20 PM

本文將介紹如何在Win11系統中關閉滑鼠移動工作列圖示時顯示的縮圖功能。這項功能在預設情況下是開啟的，當使用者將滑鼠指標懸停在工作列上的應用程式圖示上時，會顯示該應用程式的目前視窗縮圖。然而，有些用戶可能覺得這個功能不太實用或會幹擾到他們的使用體驗，因此想要關閉它。工作列縮圖可能很有趣，但它們也可能分散注意力或煩人。考慮到您將滑鼠懸停在該區域的頻率，您可能無意中關閉了重要視窗幾次。另一個缺點是它使用更多的系統資源，因此，如果您一直在尋找一種提高資源效率的方法，我們將向您展示如何停用它。不過

雷蛇 | 寶可夢耿鬼款無線滑鼠、滑鼠墊上架，套裝價 1549 元 Jul 19, 2024 am 04:17 AM

本站7月12日消息，雷蛇今日宣布推出雷蛇|寶可夢耿鬼款無線滑鼠、滑鼠墊。其單品定價分別為1,299元及299元，包含兩款產品的套裝價則為1,549元。這並非雷蛇首次推出耿鬼聯名的周邊產品，2023年雷蛇就推出過耿鬼款的八岐大蛇V2遊戲滑鼠。這次推出兩款新品整體均採用與鬼斯、鬼斯通、耿鬼家族外觀類似的深紫色底色，印有這三隻寶可夢和精靈球的線條輪廓，中間則為耿鬼這一經典幽靈屬性寶可夢的彩色大圖。本站發現，雷蛇|寶可夢耿鬼款無線滑鼠是基於先前發表的毒蝰V3專業版打造。其整體重量為55g，搭載雷蛇第二代FOC

惠普推出 Professor 1 三模輕音滑鼠：4000DPI、藍影 RAW3220，首發價 99 元 Apr 01, 2024 am 09:11 AM

本站3月31日消息，惠普近日在京東上架了一款Professor1三模藍牙滑鼠，可選用黑白奶茶色，首發價99元，需支付10元訂金。據介紹，這款滑鼠重量為106克，採用人體工學設計，尺寸為127.02x79.59x51.15mm，可選七檔4000DPI，搭載藍影RAW3220傳感器，使用650毫安時電池，號稱一次充電續航可以使用2個月。本站附滑鼠參數資訊如下：

VGN 聯名《艾爾登法環》鍵鼠系列產品上架：菈妮 / 褪色者定制主題，首發 99 元起 Aug 12, 2024 pm 10:45 PM

本站8月12日消息，VGN於8月6日推出了聯名《艾爾登法環》鍵鼠系列產品，包含鍵盤、滑鼠和滑鼠墊，採用菈妮/褪色者客製化主題設計，目前系列產品已上架京東，售價99元起。本站附聯名新品資訊如下：VGN丨艾爾登法環S99PRO鍵盤此鍵盤採用純鋁合金外殼，輔以五層消音結構，使用GASKET板簧結構，擁有單鍵開槽PCB、原廠高度PBT材質鍵帽、鋁合金個人化背板；支援三模連接和SMARTSPEEDX低延遲技術；接入VHUB，可一站式管理多款設備，首發549元。 VGN丨艾爾登法環F1PROMAX無線滑鼠該滑鼠

雷蛇滑鼠驅動在哪個資料夾 Mar 02, 2024 pm 01:28 PM

很多使用者不知道自己雷蛇驅動安裝的檔案去了哪裡，這些驅動檔案一般都是安裝在了系統盤，也就是電腦的C盤，具體位置在programfiles下的RAZE資料夾。雷蛇滑鼠驅動在哪個資料夾答：在系統C碟的programfiles下的RAZE資料夾。一般驅動都會安裝在C盤，按照位置去找就可以了。雷蛇滑鼠驅動安裝方法介紹1.下載好官網的檔案以後雙擊運行自己下載的EXE檔。 2、等待軟體載入。 3.在這裡可以選擇你要安裝的哪個驅動程式。 4.選擇好以後點選右下角的「安裝」就可以了。

多彩推出 M900 Pro 無線遊戲滑鼠：右手人體工學造型，8K Nano 接收器，199 元起 Mar 23, 2024 pm 05:16 PM

本站3月22日消息，Delux多彩推出M900Pro無線遊戲滑鼠，使用右手人體工學造型，首發預售價199元起。多彩M900Pro使用右手人體工學設計，為中大手用戶打造，重63g，並噴有霧面UV塗層。滑鼠使用PAW3395感應器，原廠Nano接收器支援8000Hz無線報酬率，搭載環諾藍殼粉點微動並標配RGB充電底座與防滑貼。此外，滑鼠還支援調節LOD、全鍵自訂、自訂波紋控制與直線修正等功能，配備PTFE腳墊，1.6m傘繩線，並內建接收器收納倉。本站總結此滑鼠具體參數如下：顏色：黑、白、紅傳

滑鼠配重塊如何安裝 Mar 01, 2024 am 09:20 AM

我們在為了增加自己的手感還有穩定性購買了滑鼠配重之後我們該如何安裝呢，有些小夥伴也不知道該如何操作，今天就來教大家如何安裝這個滑鼠配重塊。滑鼠配重塊如何安裝：1.滑鼠的底下就是吸鐵石，我們往下掰開。 2.接著我們將配重盒用鑷子挑開。 3、然後我們把配重塊放到滑鼠底下。 4.最後我們的滑鼠就增加了穩定性。