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插件如何协助进行内存监控 之 PerfMon Metrics Collector设置

    参考文章: http://www.cnblogs.com/zhaoxd07/p/5197669.html 当然最重要的是自己的实践,之前试的别人用的老的包 如XXstand.jar,结果并没有成功. ...

  2. 使用Hexo + Github Pages搭建个人独立博客

    使用Hexo + Github Pages搭建个人独立博客 https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog ...

  3. PL/SQL将sql脚本数据导入Oracle

    PL/SQL将sql脚本数据导入数据库: 1.首先,使用plsql登录到需要导入数据的数据库.在[tools]--[Import tables] 2.选择第二个[SQL Inserts],在下面,点击 ...

  4. nohup top & 问题: top: failed tty get

    执行 nohup top & nohup.out 显示 top: failed tty get +++++++++++++++++ top后台执行显示:top: failed tty get ...

  5. 查SQLserver性能瓶颈

    https://www.cnblogs.com/wayne-ivan/p/3821750.html

  6. docker tomcat镜像制作

    推荐使用dockerfile(本文直接拉取tomcat需要进入容器自行安装vim):docker利用Dockerfile来制作镜像 1.查找Docker Hub上的tomcat镜像 [root@loc ...

  7. C#的配置文件App.config使用总结

    应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序.配置文件的根节点是configuration. ...

  8. Android编程权威指南(第三版)- 2.8 挑战练习:添加后退按钮

    package com.example.geoquiz; import android.support.v7.app.AppCompatActivity; import android.os.Bund ...

  9. Java快速开发平台,JEECG 3.7.7闪电版本发布,增加多套主流UI代码生成器模板

    JEECG 3.7.7 闪电版本发布,提供5套主流UI代码生成器模板 导读 ⊙平台性能优化,速度闪电般提升           ⊙提供5套新的主流UI代码生成器模板(Bootstrap表单+Boots ...

  10. 【JEECG技术文档】JEECG 接口权限开发及配置使用说明

    1.功能介绍   通过接口配置实现,对接口的访问权限控制和数据权限控制,接口时REST接口,接口权限认证机制使用Json web token (JWT) 接口权限调用流程: (1)通过接口用户的用户名 ...