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 ...
随机推荐
- android 开发 实现一个带图片Image的ListView
注意:这种实现方法不是实现ListView的最优方法,只是希望通过练习了解ListView的实现原理 思维路线: 1.创建drawable文件夹将要使用的图片导入进去 2.写一个类,用于存放图片ID数 ...
- hive之窗口函数
窗口函数 1.相关函数说明 COVER():指定分析函数工作的数据窗口大小,这个数据窗口大小可能会随着行的变而变化 CURRENT ROW:当前行 n PRECEDING:往前n行数据 n FOLLO ...
- 【Python爬虫实战】微信爬虫
所谓微信爬虫,即自动获取微信的相关文章信息的一种爬虫.微信对我们的限制是很多的,所以我们需要采取一些手段解决这些限制主要包括伪装浏览器.使用代理IP等方式http://weixin.sogou.com ...
- 《算法》第六章部分程序 part 6
▶ 书中第六章部分程序,包括在加上自己补充的代码,包括二分图最大匹配(最小顶点覆盖)的交替路径算法和 HopcroftKarp 算法 ● 二分图最大匹配(最小顶点覆盖)的交替路径算法 package ...
- 1. SpringBoot启动后,报异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.
出现这个异常说明了跳转页面的url无对应的值. 原因1: Application启动类的位置不对.要将Application类放在最外侧,即包含所有子包 原因:spring-boot会自动加载启动类所 ...
- WIN10下VS CODE 更新后拓展宿主意外终止问题解决方法(每次系统更新都要删除一次git)
S CODE最近更新后,一打开就会出现拓展宿主意外终止的错误,点重新加载等都不好用. 出现这个问题主要是和git有关,做如下操作处理就好: 打开vscode安装文件夹->resource文件夹- ...
- Python_02 基本数据类型、while循环
1.基本数据类型 1.字符串(引号内): name=“我是Manuel” name='我是Manuel' name="""Manuel""" ...
- mp3-
- Crash 文件调试
Xcode目录下执行 find . -name symbolicatecrash 找到symbolicatecrash位置,将其拷贝到debug用的文件夹下 执行命令 export DEVELOPER ...
- Net操作Excel_NPOI
Npoi 简介 1.整个Excel表格叫做工作表:WorkBook(工作薄),包含的叫页(工作表):Sheet:行:Row:单元格Cell. 2.Npoi 下载地址:http://npoi.codep ...