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 点击图片替换样式的更多相关文章

  1. 进阶实战 css 点击按钮的样式

    1.  html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...

  2. 复选框checkbox——用背景图片替换样式

    input { border : none; display : inline-block; width : 25px; height : 25px; -webkit-apearance : none ...

  3. CSS样式,雪碧,图片替换,渐变小析

    Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...

  4. 移动Web—CSS为Retina屏幕替换更高质量的图片

    来源:互联网 作者:佚名 时间:12-24 10:37:45 [大 中 小] 点评:Retian似乎是屏幕显示的一种趋势,这也是Web设计师面对的一个新挑战;移动应用程序的设计师们已经学会了如何为Re ...

  5. 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

    1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...

  6. node.js入门学习(二)MIME模块,request和response对象,demo之不同url请求不同html页面,页面包含图片、样式css等静态资源

    一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...

  7. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  8. CSS——图片替换方法比较

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象. 经典的替换方法: Fahrner ...

  9. css图片替换方法

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),因为文字才是搜索引擎寻找的主要对象. https://www.cn ...

随机推荐

  1. 【Jmeter自学】Jmeter性能测试(四)

    ==================================================================================================== ...

  2. day6--递归函数

    一递归函数 我们老师经常喜欢讲的一句话就是:人理解函数,神理解递归,那么什么是递归函数? 递归函数:在一个函数里面调用函数本身,也就是说这个函数里面出现了和函数一样的名字 例如: def func(n ...

  3. python-GIL

    全局解释器锁GIL:在同一时刻仅有一个线程可被调度执行.对于单核环境,该实现简单高效.对于多线程的并发应用,一般通过多进程加协程充分发挥多核计算能力. 对于I/O密集型任务,线程发生阻塞时,会自动释放 ...

  4. ssh rsa 非对称加密 基本原理

    我们常用的ssh 免密登陆是用了 非对称加密的rsa算法(最为常用),与对称加密的相比会慢一些,但是更安全.秘钥长度超过768位无法破解. 默认长度是2048位(无法破解,非常安全) ssh-keyg ...

  5. twisted reactor分析

    调用reactor.run(),就会调用到mainloop函数,从而调用到select或epoll,监控fd的读写. posixbase.py: def listenTCP(self, port, f ...

  6. JS获取QueryString(Jquery)

    QueryString = {      data: {},      Initial: function() {          var aPairs, aTmp;          var qu ...

  7. leetcode218

    from heapq import * class Solution: def getSkyline(self, LRH): skyline = [] i, n = 0, len(LRH) liveH ...

  8. Windows下开启Redis PHP拓展

    1. 安装Redis windows下redis的版本,git地址https://github.com/MSOpenTech/redis/releases 2. 打开phpInfo,查看当前PHP是N ...

  9. 选择、操作web元素

    11月1日 什么是web元素 Selenium自动化主要就是:选择界面元素,操作界面元素(输入操作:点击.输入文字.拖拽等,输出操作:获取元素的各种属性),根据界面上获取的数据进行分析和处理 选择元素 ...

  10. numpy笔记

    numpy数组切片 import numpy as np arr = np.empty((8, 3))for i in range(8): arr[i] == i arr[1,2] # 选取第1行第2 ...