css實現滑鼠觸發效果-css教學-PHP中文網

首頁

web前端

css教學

css實現滑鼠觸發效果

墨辰丷

May 11, 2018 pm 05:54 PM

css 效果

本片文章主要介紹使用css實現滑鼠觸發效果，有興趣的朋友參考下。

程式碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<title>css打造鼠标触发效果</title> 
<style type="text/css"> 
<!-- 
body { 
margin: 0; 
padding: 0; 
color: #000; 
font-size: 12px; 
line-height: 160%; 
text-align: left; 
height: 100%; 
font-family: &#39;宋体&#39;,Tahoma ,arial,verdana,sans-serif,&#39;Lucida Grande&#39;,&#39;Lucida Sans Unicode&#39;; 
} 
*{ margin:0; padding:0;} 
h2,h2 a:link,h2 a:hover,h2 a:visited{ 
font-size: 14px; 
text-decoration: none; 
color: #000000; 
} 
.kw_from { 
padding:20px 0 0 0px; 
margin: auto; 
height: 300px; 
overflow: hidden; 
width: 650px; 
} 
.kw_from .sbtn{ 
float:left; 
width:80px; 
padding: 16px 0 0 0; 
} 
.kw_from .searchMore{ 
float:left; 
width:80px; 
padding: 4px; 
} 
#searchNav { 
width:430px; 
float: left; 
} 
#searchNav #conter1, #searchNav #conter3{ 
float:left; 
width:250px; 
} 
#searchNav #conter2, #searchNav #conter4{ 
float:left; 
width:180px; 
} 
#searchNav ul {  
padding: 0; 
margin: 0; 
list-style: none; 
} 
#searchNav li { 
float: left;  
} 
#searchNav li ul {  
display: none;  
top: 20px;  
} 
#searchNav li:hover ul, #searchNav li.over ul { 
display: block; 
float:left; 
} 
#searchNav ul li a{ 
float:left; 
display:block; 
font-size:12px; 
padding:3px; 
text-decoration: none; 
color: #777; 
} 
#searchNav ul li a:hover{ 
background-color:#f4f4f4; 
} 
#searchNav #jobKw{ 
width:220px; 
height:18px; 
} 
#searchNav #cityKw{ 
width:130px; 
height:18px; 
} 
--> 
</style> 
<script type="text/javascript"> 
<!--//--><![CDATA[//> 
<!-- 
startList = function() { 
if (document.all&&document.getElementById) { 
navRoot = document.getElementById("searchNav"); 
for (i=0; i<navRoot.childNodes.length; i++) { 
node = navRoot.childNodes[i]; 
if (node.nodeName=="LI") { 
node.onmouseover=function() { 
this.className+=" over"; 
} 
node.onmouseout=function() { 
this.className=this.className.replace(" over", ""); 
} 
} 
} 
} 
} 
window.onload=startList; 
//--><!]]> 
</script> 
</head> 
<body> 
<div class="kw_from"> 
<form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()"> 

<ul id="searchNav"> 
<li id="conter1"><h2>找什么</h2> 
<input id="jobKw" name="jobKw" type="text" /> 
<ul id="conter3"> 
<li><a href="#">会计</a> </li> 
<li><a href="#">网页设计</a></li> 
<li><a href="#">翻译</a></li> 
<li><a href="#">家教</a></li>  
<li><span class="moreCity"><a href="#">更多>> </a></span></li> 
</ul> 
</li> 
<li id="conter2"><h2>在哪里</h2> 
<input id="cityKw" name="cityKw" type="text" /> 
<ul id="conter4"> 
<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> 
<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> 
<li><a href="#">西安</a></li> 
<li><a href="#">沈阳</a></li> 
<li><span class="moreCity"><a href="#">更多城市>></a></span></li> 
</ul> 
</li> 
</ul>  
<div class="sbtn"> 
<input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /> 
</div> 
<div class="searchMore"> 
</form>  
</div> 
</body> 
</html>

登入後複製

相關推薦：

##原生JS HTML5實現跟隨滑鼠一起流動的粒子動畫效果

css實作滑鼠移入移出動態效果

純css實作滑鼠移入逐漸高亮

以上是css實現滑鼠觸發效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7831

Java教學

1648

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1239

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。