<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
span{
display: none;
margin-top: 50px;
}
p{
float: left;
width: 200px;
text-align: center;
border: 1px solid red;
}
p:hover span{
cursor: pointer;
display: block;
}
span:hover{
background: pink;
}
</style>
</head>
<body>
<div>
<p>获取焦点
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
</p>
<p>获取焦点
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
</p>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</html>

纯css，编写菜单移入效果的更多相关文章

  1. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  2. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  3. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

  4. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  5. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  6. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  7. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  8. day19—纯CSS实现菜单列表下框跟随效果

    转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...

  9. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

随机推荐

  1. js通过循环多张图片实现动画效果

    以小鱼摇尾巴和眨眼睛为例 动画思路: 1.将图片资源放在数组里面 2.通过计时器来设定间隔时间 3.通过计数器来取相应的图片 第一步:基本框架,鱼身体 <body> <canvas ...

  2. 使用PowerShell修改操作系统“环境变量”

      有时候我们需要命令行工具,但在使用前往往需要先导航至命令工具所在的目录,比如:stsadm 我们首先需要导航至(以SharePoint2013为例):C:\Program Files\Common ...

  3. 酷欧天气(CoolWeather)应用源码

    <ignore_js_op> 181420yank2y45klayhaan.jpg (35 KB, 下载次数: 0) 下载附件  保存到相册 2016-3-29 15:09 上传   酷欧 ...

  4. audio 基本功能实现（audio停止播放,audio如何静音,audio音量控制等）

    audio最简单原始的播放.暂停.停止.静音.音量大小控制的功能,注意某些浏览器会有权限无法自动播放噢(video也会如此) <!doctype html> <html> &l ...

  5. AEAI HR_v1.5.2升级说明，开源人力资源管理系统

    1.升级说明 本次AEAI HR升级内容主要是针对数通畅联推出AEAI ECP企业云联平台而升级的,其中对AEAI HR的各模块进行扩展,同时增加了移动门户版功能及为AEAI ECP提供数据服务接口. ...

  6. x01.os.21: print "Loading..."

    Linux Inside 是中文版,值得下载一读. 先把目标设低点,开机进入后,在屏幕上打印“Loading..."即可.由于要在 bochs 中运行,首先就是安装 bochs.Oldlin ...

  7. 项目自动化建构工具gradle 入门4——javaWeb在浏览器中显示helloWorld

    在java应用中,其实做的最多的还是java web应用.所以现在我们做的就是用gradle构建一个简单的web项目,简单点,直接上代码吧. 1.进入目录D:\work\gradle\web,新建文件 ...

  8. 【码在江湖】前端少侠的json故事（中）ng的json

    ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...

  9. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  10. Redis与KV存储(RocksDB)融合之编码方式

    Redis与KV存储(RocksDB)融合之编码方式 简介 Redis 是目前 NoSQL 领域的当红炸子鸡,它象一把瑞士军刀,小巧.锋利.实用,特别适合解决一些使用传统关系数据库难以解决的问题.Re ...