CSS实现鼠标移入弹出下拉框
前言
最近比较沉迷CSS,所以我现在来做个鼠标的交互效果
HTML
<ul>
<li>测试</li>
<li>测试</li>
<li title="字号">
<i class="fa fa-text-height"></i>
<div style="transform: translateX(-35%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">设置字号</p>
<ul>
<li>x-small</li>
<li>small</li>
<li>normal</li>
<li>large</li>
<li>x-large</li>
<li>xx-large</li>
</ul>
</div>
</li></ul>
CSS
.EditorMenu ul {
margin: 0;
padding: 0px;
height: 100%;
display: flex;
text-align: center;
margin: 0px 5px;
}
.EditorMenu ul li {
display: block;
width: 36px;
line-height: 2.3em;
position: relative;
}
.EditorMenu ul li:hover {
cursor: pointer;
}
.EditorMenu ul li:hover i {
color: #000 !important;
}
.EditorMenu ul li:hover i svg path {
fill:#000;
}
.EditorMenu ul li:hover div {
z-index: 2;
display: block;
animation: EditorMenuAnima ease 0.5s forwards;
}
@keyframes EditorMenuAnima {
0% {
top:-100px;
}
30% {
top: 35px;
}
60% {
top: 20px;
}
100% {
top: 35px;
}
效果
后言
本文结束了,如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方,给我提意见,让我加以改进
CSS实现鼠标移入弹出下拉框的更多相关文章
- easyui combobox点击输入框弹出下拉框
由于easyui combobox需要点击下拉箭头才能下拉,不能像select标签那样点击输入框就下拉,所以觉得不太方便,查看了一下,combobox弹出框是一个div,原本想在他的输入框的点击事件中 ...
- JQuery autocomplete获得焦点触发弹出下拉框
需求:autocomplete控件,当点击获得焦点的时候也要弹出下拉列表(autocomplete默认是输入之后才会跟随出下拉列表),下面直接贴代码. js代码: $("#customerN ...
- asp.net html 单击按钮弹出下拉框效果
1.说明 需要引用jquery.js文件,我的页面是在asp.net MVC4 添加的web窗体,其他不多说 直接看代码 2.代码 <%@ Page Language="C#" ...
- ActionBar点击弹出下拉框操作
首先: getActionBar().setDisplayShowTitleEnabled(false); ActionBar.LayoutParams lp = new ActionBar.Layo ...
- IOS第二天-新浪微博 - 添加搜索框,弹出下拉菜单 ,代理的使用 ,HWTabBar.h(自定义TabBar)
********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css配合js模拟的select下拉框
css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- 利用css新属性appearance优化select下拉框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 用css写出下拉框(代码转自wq群)
做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...
随机推荐
- es创建普通索引以及各种查询
创建索引 创建普通索引: PUT /my_index { "settings": { "index": { "number_of_shards&quo ...
- Java架构师方案—多数据源开发详解及原理(二)(附完整项目代码)
1. mybatis下数据源开发工作 2. 数据源与DAO的关系原理模型 3. 为什么要配置SqlSessionTemplate类的bean 4. 多数据源应用测试 1. mybatis下数据源开发工 ...
- 第 8 篇:内容支持 Markdown 语法,接口返回包含解析后的 HTML
作者:HelloGitHub-追梦人物 在 Django博客教程(第二版) 中,我们给博客内容增加了 Markdown 的支持,博客详情接口应该返回解析后的 HTML 内容. 来回顾一下 Post 模 ...
- python3 函数的参数
函数的参数 形参(函数定义时) + 实参(函数调用时) 形参:形式参数 在函数的定义处定义的参数,比如def func(参数1, 参数2, 参数3...) 普通参数(位置参数), 默认参数,普通收集参 ...
- robotframework获取Token
公司做接口自动化,但是其他接口调用都需要传入token,所以首要目标是把token读取出来. 需要清楚以下内容: 1.登录使用post请求 2.https协议,且登录后需手工验证SSL证书,默认处于不 ...
- 【小白学PyTorch】13 EfficientNet详解及PyTorch实现
参考目录: 目录 1 EfficientNet 1.1 概述 1.2 把扩展问题用数学来描述 1.3 实验内容 1.4 compound scaling method 1.5 EfficientNet ...
- Filecoin: 挖矿流程扫盲
前言 IPFS以及FileCoin的白皮书知识量比较大,需要花费一些时间成本来学习. 下面先针对挖矿相关的知识进行研究,总结一下Filecoin中挖矿的流程以及相关概念. What is Fileco ...
- zookeeper 笔记--curator分布式锁
使用ZK实现分布式独占锁, 原理就是利用ZK同级节点的唯一性. Curator框架下的一些分布式锁工具InterProcessMutex:分布式可重入排它锁 InterProcessSemaphore ...
- TabLayout+ViewPager制作简单导航栏
先看样例,有图有真相 绑定viewpager 此处主要说明tablayout的使用方法,viewpager绑定fragment的介绍在其他文章说明 mBinding.tabsLayout.setupW ...
- C++系列教程
C++系列教程: 本人是一个高二狗C++小白,之前徘徊在Python和易语言等一些语言之间,这是我几天学习收获的结果,该教程是我自己搜集整理,再加上自己对C++的理解编写的,也是一个偏经验类型的,希望 ...