首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
hover 出现图标
2024-11-09
hover效果的几种方式
1.改变透明度 #share_wrap a{display: inline-block;width: 48px;height: 44px;background: url(/images/financecorps/invite_icon.png) scroll no-repeat center center;background-position: -0px -0px;vertical-align: top;font-size: 12px;color: #191919;text-align: ce
导航栏图标切换:click事件,hover事件
最近再做一个基于angular6的项目,导航栏需求:1.hover切换图标 2.click切换图标 先用jquery实现功能,在在angular组件里面实现. demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏图标切换</title> <style> ul{ backgro
360随身WiFi驱动下载
一场不算太好的体验,但还是解决问题了 360随身WiFi驱动下载地址 事情经过: 某天在家里组装起PC,才发现当时没有在这屋里预留网线接口,走明线穿堂过户肯定是不合适的,还是买个无线网卡吧 自然还是要顶一下360的,我家里有360的路由器.摄像头.手表.周边..以后有了娃肯定也会买机器人的 在官网上看了下,是说可以当无线网卡使,但这一点貌似说得很含糊,主要都是在强调可以做WiFi热点 在京东上咨询一下客服,确认是可以当无线网卡的,买! 收货 开机,插上随身WiFi 启动不起来,hover 到图标
css百宝箱
关于css百宝箱? 在前端学习中,总会遇到零星的知识点,小技巧,这些知识点小到不至于用一片博客写出来,遇到时网上查询一下或许也能搞定,但不一定能记住,所以这篇博客就用来记录那些散落的知识点,积少成多,故名百宝箱. 1.文本框光标上浮或下坠的问题 文本框光标位置错误是经常碰到的bug了,自从干了前端,平时上网和以前大不相同,总会对网页的小问题特别敏锐,光标问题可以说是我碰到最多的之一了,不信你看: 酒仙网的登录页: 甚至还有淘宝: 不过现在他们已经修复好啦,但可惜还是被我截图了,在平时我也碰
下拉菜单得经典写法html5
<!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-
compass模块----Utilities----Sprites精灵图合图
css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大.也正是因为这一点,导致很多开发者懒于使用css雪碧图. 配置compass项目 $ compass init 会生成相应的目录和配置文件.在images目录下建立logo目录存放需合并的图标.项目目录结构如下: - sass |-- icons.scss |-- scre
js分享功能(微信,QQ,微博,空间,豆瓣等)
日常编程中,我们可能会碰到项目中的分享功能,各大平台都有分享接口和文档说明,当然也有一些一键分享插件,例如:sosh,iShare.js等等 但有些同学不想引用插件,那么我整理了一些常用的分享至平台功能,以供参考. html结构: <div class="share-list"> <ul class="share-container"> <li> <a title="分享到微信" href="j
Qt之QComboBox定制
说起下拉框,想必大家都比较熟悉,在我们注册一些网站的时候,会出现大量的地区数据供我们选择,这个时候出现的就是下拉框列表,再比如字体选择的时候也是使用的下拉框,如图1所示.下拉框到处可见,作为一个图形库,qt也提供了QtComboBox类来供我们使用,但是有些时候简单的下拉列表已经满足不了我们的需求,如图2所示,是一个下拉表格,这个时候就需要我们自己定制一下QComboBox. 图1 图2 上边说了我们需求的变化,接下来我就讲述一下关于QComboBox定制的一些内容,本片文章我就只讲述两种常用的
神奇的CSS3混合模式
神奇的css3混合模式 对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果.但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的,即使是文字,当字体很炫的话,我们也不得不用切图来替代.实际上在16年CSS3就新增了一个很有意思的属性 -- mix-blend-mode,我们称之为混合模式,它类同于ps的混合模式,也就是说在CSS中我们也可以利用混合模式制作出一些效果. 先引出一个小例子,我们来看下css3混合模式到底可以实现一
简单的圆形图标鼠标hover效果 | CSS3教程
演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animations来制作.图标的创建将使用IcoMoon app来完成. 注意:不是每一个浏览器都支持伪元素,最好是使用Chrome或Firefox浏览器观看. HTML结构: 图标组的结构是使用一个div包含一组a元素,给每个a元素设置图标class. <div class="hi-icon-wrap hi
JD . 简单的网站构成、引入图标、去除 图片间距/加粗/倾斜/下划线/蓝色外边框 禁止文本拖拽、文字居中、做logo、模拟鼠标 、不使用hover外部css样式实现hover鼠标悬停改变样式
模拟京东案例准备: 截图(效果图PSD文件) 搭建项目环境 (结构样式行为分离) HTML 核心文件 index.html CSS 控制样式 base.css(基础样式) global.css(全局样式) Image 放图片的文件夹 JS 音频视频..... 站点 站点 == 项目 == 项目文件夹 == (根目录) 引入图标 下载 京东: "http://www.jd.com/favicon.ico" www.jd.com
jquery实现一个标签图标hover到上面的时候显示tooltip
设计图: 解决思路:1.在thumbnailbox.js这个插件中加入tags弹出框显示的内容,一开始让这些内容display:none; 然后再用css画出来一个三角形 实现方法: 知识点:Jquery-ui中$.widget()实现一个自定义的插件,使用方法为: (function(){ $.widget("custom.thumbnailbox", { options: { }, _create: function(){}, _displayTime: function(tick
图标字体 VS 雪碧图——图标字体应用实践
本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点. 雪碧图 雪碧图实例:淘宝PC端 将多张小图放至一张大图 使用的时候,通过background-position调整显示的位置,如下图所示: 雪碧图的使用方法 使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数.因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chro
CSS3鼠标滑过图标放大以及旋转
本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就是利用这种方法实现的.由于只用到CSS3,所以实现的代码比较简单. //附上代码 <!doctype html><html><head> <meta charset="utf-8"> <title>CSS3鼠标滑过图标放大旋转动画
纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.htm 简洁代码如下: <link rel="stylesheet" href="http://hovertree.com/texiao/css/19/hoverkicon.css"> <div><i class="icono-mai
highcharts基本配置和使用highcharts做手机端图标
使用highcharts三个理由:1>手机适配2>大数据的支持3>svg的优势缺点:不开源.学习资料少 官方有基本的常规用法,一般都是基于jquery写的例子,也可以自己封装函数,用原生来调取,性能简单测试一下,没发现两者有什么大的区别. heightcharts.js是一些简单图表的框架js,但是要做动态实时数据图 <script src="js/jquery-1.7.2.js"></script> <script src=&quo
字体在网页中画ICON图标
用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background-position:xpos ypos;相对位置为左上角的 0 0,向右向下取负值 实例部分的html代码及js代码(通过js来改变背景图的位置) <ul class="sprite"> <li> <s class="s-icon">&
html小知识点汇总(浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class,针对特定的标签进行修改)
1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>标题</title> <link rel=&q
css利用padding生成图标
先插入HTML结构: <div class="line-three"></div> <div class="circle"></div> 结构是不是很简洁!css代码如下: .line-three{ width: 150px;height: 30px; padding:15px 0; border-top: 30px solid; border-bottom: 30px solid; background-color:
jQuery漂亮图标的垂直导航菜单
效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量图. 源码下载 效果图如下: HTML文件代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv=&
css hover对其包含的元素进行样式设置
<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)">价格<span class="icon-all icon-down-single-arr"></span></a> </li> </ul> 对a链接包含的span图标进行样式更改. .icon-down-sing
热门专题
c#弹出窗口输入内容
二叉搜索树的第k个结点
heidisql报10061
C# HMACSHA256 公钥
编译原理 证明关系式成立
dwr ajax controller 加了参数报错
java多线程火车票
tomcat不同项目不同端口
prometheus exporter 开发 java
js 遍历数据对象是否包含某一字符串
屏蔽空UserAgent
phaser补间动画的ease属性
detach()函数
mysql 设置host=%还是无法访问
nginx对ssl证书信息加密隐藏
springboot部署was 坑
微信小程序input输入时间
photoshop去毛边
sqlldr导入数据一直报字段超长
docker ps指令 显示指定的列