<meta charset="utf-8" />
<style type="text/css">
div{overflow: hidden;}
div.search_box input{
float:left;
width:200px;
height:50px;
box-sizing:border-box;
padding:0 40px 0 10px;
line-height:50px;
border:0;
border-left:1px solid #ddd;
outline:none;
}
.search_box>form>button{
float:right;
width:40px;
height:50px;
border:0;
border-right:1px solid #ddd;
background:url(search1x.png) no-repeat center;
position:absolute;
left:160px;
}
div.search_box input:hover{
box-shadow: inset 0 -2px 2px #3b6caa,inset 2px 0 2px #3b6caa,inset -2px 0 2px #3b6caa;
}
div.search_box button:hover{
box-shadow:inset 0 -2px 2px #3b6caa, inset 2px 0 2px #3b6caa, inset -2px 0 2px #3b6caa;
cursor:pointer;
}
</style> <div class="search_box">
<form>
<input type="text" placeholder="Search" >
<button type="submit" ><button>
</form>
</div>

css实现 当鼠标移到input的时候,input框出现阴影,当移动到button的时候,input框的阴影消失,button框出现阴影的更多相关文章

  1. CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示

    CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...

  2. 在input中实现点点点与当鼠标移上去时显示剩余的字

    项目中经常会遇到这个问题,在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多,那么这个时候需求里就要求第一,多余的字要以点点点的形式隐藏,第二,当鼠标移上去的时候要以title提示的方式显示 ...

  3. 用css 添加手状样式,鼠标移上去变小手,变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...

  4. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  5. 用css 添加手状样式,鼠标移上去变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...

  6. 使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部:

    使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...

  7. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  8. 转:纯CSS实现“鼠标移过显示层”效果

    利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...

  9. CSS快速入门-鼠标悬浮(hover伪类)

    一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...

随机推荐

  1. eclipse version

    查看Eclipse的版本号: 1. 找到eclipse安装目录 2. 进入readme文件夹,打开readme_eclipse.html 3. readme_eclipse.html呈现的第二行即数字 ...

  2. APP注释代码

    <meta name="viewport" content="width=device-width,height=device-height,inital-scal ...

  3. BZOJ2435——[Noi2011]道路修建

    1.题意:给个树,边的权值=两边的点数差*此边的长度,求所有边的权值和 2.分析:真不想说啥了...dfs即可 #include <cmath> #include <cstdio&g ...

  4. 实现统一用户体验的BaseActivity

    对一个规模较大的App开发团队来说,保持统一的代码规范是个好的事情,同时,保持统一的用户体验规范也是个好的事情. 当用户进入一个页面时,一般会有以下交互场景:场景1, 初始化loading,页面从se ...

  5. 百度地图用ip获取当前位置的经纬度(高精度)

    步骤比较简单先上百度地图API官网,申请一个应用AK(访问凭据):查看一下高进度定位的API,看看是否都符合要求下面直接上代码 /** * 根据ip获取地理坐标 * @param ip * @retu ...

  6. How-to-uninstall-Meteor // install Meteor manually

    How-to-uninstall-Meteor :  http://www.uninstallapp.com/article/How-to-uninstall-Meteor-.html install ...

  7. tomcate端口设定和服务器虚拟目录设定

      设定端口和  虚拟目录 在server.xml <?xml version='1.0' encoding='utf-8'?> <!--   Licensed to the Apa ...

  8. [Linux][PHP]安装swoole扩展

    1.下载swoole 2.解压并配置 /usr/local/php/bin/phpize ./configure --enable-swoole-debug --enable-sockets --en ...

  9. 2017 苹果强制https

    苹果的ATS(App Transport Security)对服务器硬性3点要求: ① ATS要求TLS1.2或者更高,TLS 是 SSL 新的别称. ② 通讯中的加密套件配置要求支持列出的正向保密. ...

  10. .NET 程序集与命名空间

    程序集 程序集(assembly)是一个或多个托管模块,以及一些资源文件的逻辑组合. 组成部分 Windows文件首部 CLR文件首部 程序集清单 类型元数据 MSIL(CIL)代码 嵌入资源集 作用 ...