hover的一個實例教程
實例
選擇滑鼠指標浮動在其上的元素，並設定其樣式：
a:hover
{
background-color:yellow;
}
//hover,滑鼠移入移出的另一種用法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>左导航特效</title><style type="text/css">* {margin: 0px;padding: 0px;font-size: 12px;}#nav .navsBox {width: 160px;}#nav .navsBox .firstNav {height:45px;line-height:45px;background-color:#EBEBEB;border-left:10px solid #FE705C;padding-left:20px;width:130px;font-weight:bold;cursor: pointer;}#nav .navsBox ul {display:none;list-style:none;}#nav .navsBox ul li {display:block;height:45px;line-height:45px;padding-left:70px;width:90px;background-color:#F2F2F2;background-position:33px 7px;background-repeat:no-repeat;}#nav .navsBox ul li.jedh {background-image:url("./images/huan.gif");}#nav .navsBox ul li.jlbbyk {background-image:url("./images/you.gif");}#nav .navsBox ul li.jwljb {background-image:url("./images/gouwu.gif");}#nav .navsBox ul li.mrljb {background-image:url("./images/meiri.gif");}#nav .navsBox ul li.vipjtj {background-image:url("./images/zhe.gif");}#nav .navsBox ul li.onbg {background-color:#F9DBD1;}#nav .navsBox ul li a {color:#000;text-decoration:none;}</style><script src="js/jquery-1.11.3.min.js?1.1.11"></script><script>$(function () {
$(".firstNav").click(function () {var $ul= $(this).next(); if($ul.is(":visible")){
$ul.hide();
}else{
$ul.show();
$ul.children().hover(function () {
$(this).addClass("onbg");
},function () {
$(this).removeClass("onbg")
})
}
})
})</script></head><body><div id="nav"><div class="navsBox"><div class="firstNav">购物特权</div><ul><li class="jedh"><a href="#">全额兑换</a></li><li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li><li class="jwljb"><a href="#">购物领金币</a></li><li class="mrljb"><a href="#">每日领金币</a></li><li class="vipjtj"><a href="#">VIP阶梯价</a></li></ul></div></div></body></html>
以上是hover的一個實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
解析JSP註解的使用方法和分類
Feb 01, 2024 am 08:01 AM
JSP註解的分類及用法解析JSP註解分為兩種：單行註解：以結尾，只能註解單行程式碼。多行註解：以/*開頭，以*/結尾，可以註解多行程式碼。單行註解範例多行註解範例/**這是一段多行註解*可以註解多行程式碼*/JSP註解的用法JSP註解可以用來註解JSP程式碼，使其更易於閱
體驗即飛 攜手哈浮X1相機的飛行之旅
Jan 15, 2024 pm 02:21 PM
我們經常能夠在網路上看到很多精彩的俯視視角的視頻，無人機拍出來的畫面確實相當震撼，但其實很多人對無人機的認知很有限，例如有些地方限飛為什麼還能飛？其實即開即飛的「無人機」才是當前的主流，更值得多數人選擇，今天就帶給大家哈浮飛行相機X1的上手體驗。外觀方面，哈浮飛行相機X1，首創折疊設計，整機僅125g，比手機輕，折疊後可以輕鬆手握，放進包包毫無壓力。四個軟性染葉和安全邊框設計，完美保護拍攝安全。染葉創新採用Biobased生物基材，高彈耐用，安全環保;更有全保護邊框加持，起飛降落都能貼心保護手
WPSdatedif函數的用法
Feb 20, 2024 pm 10:27 PM
WPS是一款常用的辦公室軟體套件，其中的WPS表格功能被廣泛用於資料處理和計算。在WPS表格中，有一個非常有用的函數，即DATEDIF函數，它用於計算兩個日期之間的時間差。 DATEDIF函數是英文單字DateDifference的縮寫，它的語法如下：DATEDIF(start_date,end_date,unit)其中，start_date表示起始日期
Python函數介紹：isinstance函數的用法和範例
Nov 04, 2023 pm 03:15 PM
Python函數介紹：isinstance函數的用法和範例Python是一門功能強大的程式語言，提供了許多內建函數，使得程式設計變得更加方便和有效率。其中一個非常有用的內建函數是isinstance()函數。本文將介紹isinstance函數的用法和範例，並提供具體的程式碼範例。 isinstance()函數用來判斷一個物件是否是指定的類別或類型的實例。該函數的語法如下
如何正確使用C語言的exit函數
Feb 18, 2024 pm 03:40 PM
c語言exit函數怎麼用，需要具體程式碼範例在C語言中，我們常常需要在程式中提前終止程式的執行，或是在某個特定的條件下退出程式。 C語言提供了exit()函數來實作這個功能。本文將介紹exit()函數的用法，並提供對應的程式碼範例。 exit()函數是C語言中的標準函式庫函數，它包含在頭檔中。它的作用是終止程式的執行，並且可以帶一個整數
Python函數介紹：abs函數的用法和範例
Nov 03, 2023 pm 12:05 PM
Python函數介紹：abs函數的用法和範例一、abs函數的用法介紹在Python中，abs函數是一個內建函數，用於計算給定數值的絕對值。它可以接受一個數字參數，並傳回該數字的絕對值。 abs函數的基本語法如下：abs(x)其中，x是要計算絕對值的數值參數，可以是整數或浮點數。二、abs函數的範例下面我們將透過一些具體的範例來展示abs函數的用法：範例1：計算
MySQL ISNULL 函數詳解及用法介紹
Mar 01, 2024 pm 05:24 PM
MySQL中的ISNULL()函數是用來判斷指定表達式或列是否為NULL的函數。它傳回一個布林值，如果表達式為NULL則回傳1，否則回傳0。 ISNULL()函數可以在SELECT語句中使用，也可以在WHERE子句中進行條件判斷。 1.ISNULL()函數的基本語法：ISNULL(expression)其中，expression是要判斷是否為NULL的表達式或
解析SQL中使用distinct關鍵字
Feb 18, 2024 pm 09:21 PM
SQL中distinct用法詳解在SQL資料庫中，我們常常會遇到需要移除重複資料的情況。此時，我們可以使用distinct關鍵字，它能夠幫助我們去除重複數據，使得查詢結果更加清晰和準確。 distinct的基本使用方法非常簡單，只需要在select語句中使用distinct關鍵字即可。例如，以下是一個普通的select語句：SELECTcolumn_name
