css打造经典鼠标触发显示选项

最新推荐文章于 2022-05-14 20:21:03 发布
最新推荐文章于 2022-05-14 20:21:03 发布
阅读量1k 收藏
点赞数
分类专栏： 网站建设 文章标签： css float function search xhtml blog
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>css打造鼠标触发效果</title>
<meta content="all" name="robots" /> 
<meta name="author" content="yyt_by@163.com,huanghai,www.hppd.cn 友情制作" />
<meta name="copyright" content="hppd" />
<meta name="description" content="hppd,prettydog,honeypig,web设计,交互设计,prettydog" />
<meta name="keywords" content="f2blog,phpblog,blog,php,xhtml,css,design,w3c,w3,w3cn,hppd,prettydog,honeypig,web设计,交互设计,prettydog" />
<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.οnmοuseοver=function() {
this.className+=" over";
}
node.οnmοuseοut=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.οnlοad=startList;
//--><!]]>
</script>
</head>
<body>
<div class="kw_from">
  <form action="/search.html" method="get" name="searchForm" id="searchForm" οnsubmit="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="#">更多&gt;&gt; </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="#">更多城市&gt;&gt;</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">
        <a href="search_expert.html">高级搜索</a><br /><a href="search_sort.html">分类搜索</a>      </div>
  </form> 
</div>
</body>
</html>
piperzero
关注
专栏目录
CSS打造经典鼠标触发显示选项
weixin_33795093的博客
03-24 85
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head&...
鼠标在菜单上移动时显示菜单提示
唸 尐 憂 的 天 空
08-22 1041
标  题: 鼠标在菜单上移动时显示菜单提示 1. 建立工程, 窗体名: Form1 ==> Label控件, 名称: lblStatus                             ==> 建立菜单若干      2. 加入一个模块  窗体中代码:  Private Sub Form_Load()     origWndProc = SetWindowLong(hwnd,
CSS打造经典鼠标触发显示选项（做搜索找工作用得到）
lampsunny的专栏
04-09 811
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','Luc
超强推荐CSS打造经典鼠标触发显示选项
10-30
超强推荐CSS打造经典鼠标触发显示选项 在这篇文章中，我们将学习如何使用CSS来创建一个经典的鼠标触发显示选项。这个选项卡具有很高的实用价值，可以应用于各种Web应用程序中。 首先，让我们来了解一下什么是鼠标...
推荐css打造经典鼠标触发显示选项
10-30
标题和描述中提到的“推荐css打造经典鼠标触发显示选项”是指使用CSS（层叠样式表）来创建一种交互式的效果，即当鼠标悬停或点击时，某些内容才会显示出来。这种效果常用于菜单、提示信息或者隐藏的详细内容等，能够...
CSS打造经典鼠标触发显示选项.rar
07-05
看到了 CSS JS打造绝对经典的滑轮新闻显示特效 这个特效，都是css js的控制经典，其实单css就可以搞定了，只不过是为了兼容那垃圾的 IE 才不得做个js ，以下的代码如果去掉js部分地话，在Opear和Firrfox都能正常的，...
CSS3鼠标悬停下划线显示特效特效代码
03-20
在本文中，我们将深入探讨如何使用CSS3来创建一种鼠标悬停时的下划线显示特效，这种特效具有方向感知，使得文字下划线在鼠标悬停时沿着鼠标移动的方向滑动。首先，我们需要理解CSS3的核心特性以及如何与JavaScript...
CSS+JS鼠标经过显示二维码和二级菜单特效
05-05
"CSS+JS鼠标经过显示二维码和二级菜单特效"就是一种提升网站互动性的技术应用。这个资源提供了一种创新的方式，当用户将鼠标悬停在特定元素上时，可以动态展示二维码和二级菜单，为用户带来更加丰富的浏览体验。 ...
html鼠标触摸显示一列,css制作经典鼠标触发显示选项 - YangJunwei
weixin_42236014的博客
06-04 346
找什么诺豆网网页设计翻译家教更多>>在那里北京上海广州深圳南京天津杭州成都重庆武汉西安沈阳更多城市>>来源：yangjunwei.com...
css样式 居中 ，变色，清除页面上个元素
just_learing的博客
05-14 322
css样式 居中 ，变色，清除页面上个元素
css鼠标点击的五种状态
热门推荐
leng0920的博客
08-19 12万+
1、a:link{color:#fff} 未访问时的状态（鼠标点击前显示的状态） 2、a:hover{color:#fff} 鼠标悬停时的状态 3、a:visited{color:#fff} 已访问过的状态（鼠标点击后的状态） 4、a:active{color:#fff} 鼠标点击时的状态 5、a:focus{color:#fff} 点击后鼠标移开保持鼠标点击时的
CSS 鼠标响应事件，鼠标经过CSS，鼠标移动CSS，鼠标点击CSS
#维多利亚的秘密#
09-04 1万+
几种鼠标触发CSS事件。   说明： onMouseDown 按下鼠标时触发  onMouseOver 鼠标经过时触发  onMouseUp 按下鼠标松开鼠标时触发  onMouseOut 鼠标移出时触发  onMouseMove 鼠标移动时触    CSS 鼠标响应事件 .Off{ background-color: #
CSS垂直树形下拉菜单
清风阁
05-02 3396
CSS垂直树形下拉菜单 翻译：Linyupark / 2006-04-29 让我们看下效果是怎样的吧:CSS与简单JS制作出的菜单 第一步:建立菜单首先建立菜单架构非常重要,最好的方法是使用ul来建立各菜单内容的从主关系.很复杂么?其实只要一路写下去就OK了: Home About History Team
jquery简单实现鼠标滑过导航栏切换内容
F_family的博客
03-06 5527
代码：&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script
使用HTML+CSS实现鼠标划过的二级菜单栏
Superman_xing的博客
05-21 2091
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; body{ text-align:center; } .menuDiv{ border:1px solid #aac; overflow:hidden; display:inline-block; } .menuD...
第三章 HTML基础学习 常用表单标签和样式表概述
下雨天@博客
05-15 398
常用表单标签：Form表单标签中需要注意的地点：&lt;form action="process.html" method="get" onsubmit="return checkFrm();" &gt; 1）//JS解决了表单验证问题，可以提高验证效率，减轻网络压力，提升服务器效率2）get提交的属于以key/value形式存储在url上进行提交，保密性差 3）隐藏域，我们不想让客户看到，但是提...
css:鼠标滑上li会显示下拉菜单(小米真实例子)?
weixin_34043301的博客
12-25 770
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;7.鼠标滑过会出现下拉菜单css实现&lt;/title&gt; &lt;style&gt; *{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值