HTML+CSS+JQuery實現下拉選單滑鼠懸浮顯示下拉選單,取消隱藏
提示
檢查匯入JAR包沒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉選單</title>
<style>
*{padding:0;margin:0;}
ul,ol,li{list-style: none;}
a{
text-decoration:none;
color:#1a66b3;
font-size: 12px;
font-family: Arial, 微軟雅黑;
}
.on ul{display: none;}
.on{
width: 100px;
border: 1px solid #e6e6e6;
line-height: 20px;
background:#fff;
}
a:hover{color:#ff2832;}
.topDown li:hover{background:#f2f2f2;color:#000;}
.xia{margin: 0px auto; width: 200px;}
.top-m > li a{padding:0 18px;}
.top-m > li{line-height:22px;padding-top:5px;}
</style>
</head>
<body>
<div class="xia">
<ul class="top-m">
<li class="on">
<a href="" class="menu-btn">我的當當</a>
<ul class="topDown">
<li><a href="">我的積分</a></li>
<li><a href="">我的收藏</a></li>
<li><a href="">我的餘額</a></li>
<li><a href="">我的評論</a></li>
<li><a href="">電子書架</a></li>
</ul>
</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$(".on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
);
});
</script>
</body>
</html>
實現效果
相關文章
- css滑鼠懸浮下拉選單效果CSS
- js css滑鼠懸停顯示下拉選單JSCSS
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- 滑鼠懸浮緩慢下拉導航選單
- css滑鼠懸浮二級下拉導航選單CSS
- 滑鼠經過顯示下拉選單
- JavaScript滑鼠懸浮出現下拉選單效果JavaScript
- jquery多個滑鼠移上顯示下拉選單jQuery
- 滑鼠懸浮出現下拉選單程式碼例項
- bootstrap 選單導航選單nav li滑鼠移入hover下拉顯示boot
- vue點選空白區域,下拉選單隱藏Vue
- css+jquery滑鼠滑過,顯示下拉選單效果CSSjQuery
- 在頂部顯示下拉選單
- Unclutter for mac多功能下拉選單隱藏工具Mac
- Vue 資料雙向繫結實現二級下拉懸浮選單Vue
- 實現單擊一級選單顯示或隱藏二級選單
- 滑鼠移上去出現下拉選單
- 滑鼠滑過,展示下拉選單
- 下拉選單隱藏工具:Unclutter for mac 中文版Mac
- 三種方法解決純css下拉選單滑鼠移入選單內容時選單隱藏消失的問題CSS
- Vue.js自定義下拉選單,如何實現在下拉選單區域外點選即可關閉下拉選單的功能Vue.js
- 下拉選單
- jquery-滑鼠經過導航條,顯示二級下拉選單jQuery
- CSS滑鼠懸停下拉顯示內容CSS
- js下拉框實現div顯示和隱藏JS
- 淺析VB.NET實現下拉選單的折行顯示
- HTML+CSS實現下拉選單HTMLCSS
- JS實現級聯下拉選單JS
- jQuery實現簡單點選隱藏和點選顯示列表的功能jQuery
- vue下拉選單Vue
- html - 下拉選單HTML
- Spinner下拉選單
- QPushButton下拉式選單(是否取消下拉三角,是否check)
- checkbox及css實現點選下拉選單CSS
- 選擇下拉選單項實現跳轉效果
- 滑鼠懸浮背景變色導航選單
- 滑鼠懸浮三形選單變叉號
- JavaScript讀取xml實現下拉選單JavaScriptXML