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 ...
随机推荐
- CentOS 7安装Oracle 12c
1.root身份安装依赖包: yum -y install binutils compat-libcap1 compat-libstdc++-33 compat-libstdc++-33*.i686 ...
- 【Linux】【Jmeter】配置Jmeter服务器和运行Jmeter
以前整理过Linux下的Jmeter知识,所以此处看可以参考以下链接: 参考链接:http://www.cnblogs.com/conquerorren/p/7880604.html [root@-- ...
- android开发 写一个自定义形状的按键
步骤: 1.在drawable 文件夹中创建一个xml布局文件. 2.修改布局文件 3.在需要使用背景的按键中导入布局. 创建布局文件: 修改布局文件: <?xml version=" ...
- 20165205 2017-2018-2《Java程序设计》结对编程一 第一周总结
20165205 2017-2018-2<Java程序设计>结对编程一 第一周总结 需求分析 对输入的算式进行计算,要求满足一下条件: 支持整数运算,如2+5,47+7865. 支持多运算 ...
- [Unity插件]AI行为树使用总结
参考链接: https://blog.csdn.net/linxinfa/article/details/72937709 https://blog.csdn.net/wanghaodiablo/ar ...
- ORA-00257: archiver error. Connect internal only, until freed【日志归档清理】
select * from V$FLASH_RECOVERY_AREA_USAGE; 查看使用情况 用plsql登陆时提示“ORA-00257: archiver error. Connect in ...
- java.lang.ClassNotFoundException: org.thymeleaf.spring5.view.ThymeleafViewRe。。。。。。。。。。。
直接上代码问题: java.lang.IllegalStateException: Failed to introspect Class [org.springframework.boot.autoc ...
- 转载:HTuple数据和VC数据的相互赋值
转载来自:http://blog.csdn.net/taily_duan/article/details/51026260 HTuple和VC数据的相互赋值 // HTuple→VC 数据类型转换 H ...
- Kali 局域网 DNS 劫持
<一> 所需工具 1: Kali-linux-2017 2: ettercap 0.8.2 3: web 服务器, 这里以 node 为例 <二> 原理 1: DNS劫持 ...
- RabbitMq (1)
1.传递模型 点对点模型(PTP) 发布-订阅模型 -------------------------------------------------------------------------- ...