CSS 点击图片替换样式








1
<ul id="u1">
<li class="sea one show1">海运</li>
<li class="air one">空运</li>
<li class="express one">快递</li>
<li class="eche one">陆运</li>
</ul>
2:
#u1 li.show1.sea {
background-image: url(images/sea1.png);
}
#u1 li.show1.air {
background-image: url(images/air1.png);
}
#u1 li.show1.eche {
background-image: url(images/eche1.png);
}
#u1 li.show1.express {
background-image: url(images/express1.png);
}
3
$("#u1 li").click(function () {
$(this).addClass("show1");
})
CSS 点击图片替换样式的更多相关文章
- 进阶实战 css 点击按钮的样式
1. html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...
- 复选框checkbox——用背景图片替换样式
input { border : none; display : inline-block; width : 25px; height : 25px; -webkit-apearance : none ...
- CSS样式,雪碧,图片替换,渐变小析
Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...
- 移动Web—CSS为Retina屏幕替换更高质量的图片
来源:互联网 作者:佚名 时间:12-24 10:37:45 [大 中 小] 点评:Retian似乎是屏幕显示的一种趋势,这也是Web设计师面对的一个新挑战;移动应用程序的设计师们已经学会了如何为Re ...
- 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】
1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...
- node.js入门学习(二)MIME模块,request和response对象,demo之不同url请求不同html页面,页面包含图片、样式css等静态资源
一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...
- 几种垂直居中的方式及CSS图片替换技术
由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px 0; 以上方法针对块级元素和 ...
- CSS——图片替换方法比较
图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象. 经典的替换方法: Fahrner ...
- css图片替换方法
图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),因为文字才是搜索引擎寻找的主要对象. https://www.cn ...
随机推荐
- MVC字符串转json,ajax接受json返回值
#region 功能 /// <summary> /// 查询 微信用户一定年月的账单 /// </summary> /// <param name="year ...
- Python——列表深浅拷贝
一.深浅拷贝 如果希望将列表复制一份,通过列表的内置方法copy就可以实现: s = [[1,2],3,4] s1 = s.copy() print(s) print(s1) 拷贝出的列表s1与原列表 ...
- glob获取指定目录下的东西+更改工作目录
一:不更改工作目录 import glob path = 'image/imgs/*.jpg' # 正则匹配 指定路径 file_path = glob.glob(path) # 即可获取所有jpg的 ...
- 31.网站数据监控-2(scrapy文件下载)
温州数据采集 这里采集网站数据是下载pdf:http://wzszjw.wenzhou.gov.cn/col/col1357901/index.html(涉及的问题就是scrapy 文件的下载设置,之 ...
- 从一个异常探索spring autowired 的原理
从一个异常探索autowired 的原理. 首先环境是这样的: public class Boss { @Autowired private Car car; } //@Component 加上这个注 ...
- SPARK快学大数据分析概要
Spark 是一个用来实现快速而通用的集群计算的平台.在速度方面,Spark 扩展了广泛使用的MapReduce 计算模型,而且高效地支持更多计算模式,包括交互式查询和流处理.在处理大规模数据集时,速 ...
- CentOS6.9 网络设置
一.临时设置IP地址 ifconfig eth0 192.168.42.119 broadcast 192.168.42.129 netmask 255.255.255.0 二.上述方法只能临时生效, ...
- oracle 相关操作
1,SqlPlus 的使用 1.01,软登入:sqlplus /nolog 1.02,登入 dba 用户:sqlplus /as sysdba 2,用户相关操作 2.01,创建用户:create us ...
- 白鹭引擎 - 遮罩( Rectangle )
1: 矩形遮罩 class Main extends egret.DisplayObjectContainer { /** * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用 ...
- 抓取mooc中国随笔
// $url = "http://www.baidu.com/"; $url= "https://www.icourse163.org/web/j/courseBean ...