<!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. FunDA（1）－ Query Result Row：强类型Query结果行

    FunDA的特点之一是以数据流方式提供逐行数据操作支持.这项功能解决了FRM如Slick数据操作以SQL批次模式为主所产生的问题.为了实现安全高效的数据行操作,我们必须把FRM产生的Query结果集转 ...

  2. [moka同学笔记]PHPexcel之excel导出和导入

    原案例来自http://www.sucaihuo.com/有修改 1.目录结构(文件不用解释,应该都可以看得懂,直接看代码)

  3. Spring+SpringMVC+Hibernate简单整合（转）

    SpringMVC又一个漂亮的web框架,他与Struts2并驾齐驱,Struts出世早而占据了一定优势,下面同样做一个简单的应用实例,介绍SpringMVC的基本用法,接下来的博客也将梳理一下Str ...

  4. springmvc<一>一种资源返回多种形式【ContentNegotiatingViewResolver】

    restful服务中一个重要的特性就是一种资源可以有多种表现形式,在springmvc中可以使用ContentNegotiatingViewResolver这个视图解析器来实现这种方式. 描述资源的三 ...

  5. 回顾java基础—Java数据类型

    1  java数据类型.8种基本类型,3种引用类型 基本类型(也称:原始类型):byte.short.int.long.char.float.double.boolean 引用类型:类,接口,数组 2 ...

  6. C# Session添加、删除封装类

    /// <summary> /// <para> </para> /// 常用工具类——Session操作类 /// <para> ---------- ...

  7. Linux 学习

    远程登录Linux(05) 文本方式远程: putty   SecureCRT  winSCP  SshClient图形方式远程:Xmanager  Xming ifconfigps -ef | gr ...

  8. mac maven

    下载Maven 下载地址 : https://maven.apache.org/download.cgi 解压zip包到指定目录 例如: /Users/Walid/Desktop/develop/to ...

  9. MVC 5 中Filter控制 action的访问权限

    1,创建一个继承自 FilterAttribute, IActionFilter的类 namespace HeatMetering2.Filters { public class HMV2Authen ...

  10. 编译安装mysql

    参考:http://www.centoscn.com/CentosServer/www/2015/0422/5245.html 安装mysql5.6.17 1.按照标准需要给mysql创建所属用户和用 ...