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

最新推荐文章于 2023-11-07 15:35:33 发布
最新推荐文章于 2023-11-07 15:35:33 发布
阅读量947 收藏
点赞数
分类专栏： CSS HTML 文章标签： css float class xhtml function input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ytbada/article/details/1563901
版权

<!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> 

ytbada
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html鼠标经过自动下拉菜单,用纯CSS实现鼠标经过后出现下拉菜单，实例讲解（附代码）...
weixin_36016360的博客
05-31 1万+
随便打开网上的任何一个网站，你会发现这些网站都有导航部分，而且有些导航在鼠标经过后，会出现下拉菜单，那这种下拉菜单怎么做呢？其实，用纯CSS就可以做导航下拉菜单。接下来，就和大家聊聊CSS怎么做下拉菜单，好，进入正题。HTML 部分：1、我们可以使用任何的 HTML 元素来打开下拉菜单，如：或 a 元素2、使用容器元素 (例如) 来创建下拉菜单的内容，并放在任何你想放的位置上。3、使用 元素来...
CSS 提示工具：Tooltip
梁辰兴的博客
09-20 1161
基础提示框（Tooltip）是一种常见的用户界面元素，通常用于向用户显示有用的信息或提示。在这个示例中，创建了一个带有 “Hover Me” 文本的按钮，当鼠标悬停在按钮上时，会显示一个位于按钮下方的提示框。CSS 提示工具是一种常用的用户界面元素，通常用于向用户显示有用的信息或提示。在CSS中，我们可以创建基于定位的提示工具，这通常涉及到使用绝对定位来放置提示框，以便使其正确地出现在鼠标指针下方。同时，还使用CSS来设置提示框的样式，包括位置、背景色、字体颜色、边框圆角等。来触发提示框的显示。
CSS实现鼠标放上去显示提示工具
最新发布
qingdouxiaohua的博客
11-07 1045
【代码】CSS实现鼠标放上去显示提示工具。
css实现鼠标悬停时滑出层提示
2301_78256053的博客
06-29 1026
俗话说的好一年之季在于春，一天之季在于晨，又是一个星期的开始，早上起来呼吸着窗外的新鲜空气，来到厂里开始新的工作，将上个星期的零件图把他装配起来，我以为本来是很简单的事，不过事实并不是想象中的那样的简单，在装配过程中出现了许多问题，这下可把我个弄荤了，都不知道该从何下手，比如说在装配的过程中出现尺寸的不一样，出现很大的间隙等等其他的许多问题。最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。
CSS 鼠标移入显示提示说明文本
coldriversnow的专栏
09-15 4214
1. 在需要使用的地方写上 html。
css实现鼠标hover显示提示信息
热门推荐
qq_39822451的博客
03-24 1万+
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <style> tbody tr p:hover:...
推荐css打造经典鼠标触发显示选项
10-30
推荐css打造经典鼠标触发显示选项
超强推荐CSS打造经典鼠标触发显示选项
10-30
超强推荐CSS打造经典鼠标触发显示选项
CSS打造经典鼠标触发显示选项.rar
07-05
看到了 CSS JS打造绝对经典的滑轮新闻显示特效 这个特效，都是css js的控制经典，其实单css就可以搞定了，只不过是为了兼容那垃圾的 IE 才不得做个js ，以下的代码如果去掉js部分地话，在Opear和Firrfox都能正常的，...
JS+CSS实现的经典tab选项卡效果代码
10-23
主要介绍了JS+CSS实现的经典tab选项卡效果代码,通过简单的鼠标事件触发js函数实现针对页面元素的遍历与样式变换功能,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript插件Tab选项卡效果
11-27
1、支持不同鼠标事件触发选项卡切换效果； 2、支持不同切换效果的配置，例如淡入淡出/直接切换； 3、支持默认展示第几个选项卡的配置； 4、支持选项卡的自动切换效果。 例子很简单，需要用到的知识包括： 1、...
jsp鼠标移动右侧显示选项卡，移开时不显示
06-14
jsp鼠标移动到指定区域，右侧显示选项卡，鼠标移开时则不显示
CSS鼠标指针样式详解，鼠标经过变小手（链接类型指针）提示可点击
Yxd0724的博客
08-30 3096
【代码】CSS鼠标指针样式详解，鼠标经过变小手（链接类型指针）提示可点击。 cursor:pointer;
html鼠标悬停出现菜单,css鼠标经过弹出子菜单特效
weixin_28999945的博客
06-03 1213
Hello React!::-webkit-scrollbar{ display:none; }::-webkit-input-placeholder {font-size: 20px;}li , span , img{list-style-type:none;cursor:pointer;}html,body,#app{margin: 0;padding: 0;height: 100%;-web...
CSS打造经典鼠标触发显示选项
weixin_33795093的博客
03-24 75
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head&...
Table样式集
YTFUNLOVE的BLOG
01-15 9075
   Table样式集  songsu» 2006-7-12 22:09:00
選項卡　十
YTFUNLOVE的BLOG
04-13 1797
function TabPage(width, height, tabTitleArray, tabPageArray){    var ids = new Array();    var id = document.uniqueID;    var tabTitleHtml = "";    var index = 0;    for (var i = 0; i     {        t
Code：CSS竖直导航菜单 - CSS Menu Vertical
YTFUNLOVE的BLOG
02-27 1380
CSS Menu - Verticalbody {margin: 0;padding: 30px;background: #FFF;color: #666;}h1 {font: bold 16px Arial, Helvetica, sans-serif;}p {font: 11px Arial, Helvetica, sans-serif;}a {color: #900;text-decorat
动太显示图片
YTFUNLOVE的BLOG
03-29 1291
 无忧脚本论坛 新手求助 
layui table数据，鼠标右键单击，右边弹出一个div，div中有两个菜单选项，修改和作废，点击修改和作废，触发对应事件，怎么实现
06-07
4. 给菜单选项绑定点击事件，分别触发修改和作废的处理函数，处理函数中可以通过获取选中行的数据来进行相应的操作。 下面是一个示例代码，仅供参考： ```javascript layui.use(['table', 'layer', 'jquery', '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值