首页 > css教程 > 正文

css实现鼠标触发效果

原创 2018-05-11 17:54:20 0 14
赞助会员专享特权
本片文章主要介绍使用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: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode'; 
} 
*{ 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中文网其它相关文章!

  • 相关标签:css 样式表 效果
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • CSS3+Js实现响应式导航条_CSS/HTML
  • 从零学CSS系列之文本属性_基础教程
  • 手机屏幕尺寸测试——手机的实际显示页面的宽度_经验交流
  • CSS3中Transition属性详解以及示例分享_CSS/HTML
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节