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. 剑指offer(一):二维数组中的查找

    说明: 1.本系列是根据<剑指Offer>这个系列做的一个小笔记. 2.直接动力是因为师兄师姐找工作很难,而且机械出生的我面试算法更难. 3.刚开始准备刷LeetCode.LintCode ...

  2. [UGUI]图文混排(六):点击区域

    点击区域可以分成两部分来分析: 0.Rect 搜索api:Rect和Rect.Rect,可以知道: 在GUI和GUILayout中,Rect的原点在左上角,向右为x轴正方向,向下为y轴正方向: 除此之 ...

  3. 使用SQL SERVER PIVOT实现行列转置

    一般我们在使用SQL语句实现行列转置时候,最常用的方法无外乎就是 case语句来实现,但是如果需要需要转置的列太多,那么case起来语句就无限庞大,十分不方便,sql server中的PIVOT就可以 ...

  4. gentoo moc audacious

    最近想在 gentoo 上面听音乐, 以前用过 audacious,现在想换成 moc 试试看. emerge -av moc,结果安装完了以后,放 mp3 没有声音,把 USE 里面各种相关解码的都 ...

  5. FreeMarker内建函数

    内建函数 内建函数语法格式: 变量+?+函数名称 获取集合大小 我们通常要得到某个集合的大小,如下图: 我们使用size函数来实现,代码如下: 共  ${goodsList?size}  条记录 转换 ...

  6. 使用wifi ssh: connect to host hadoop000 port 22: No route to host

    使用的wifi,在wifi下IP会自动分配. 先尝试能否ping通,如果都无法ping通那先把IP配置那些先搞定ping通之后遇到此问题再来尝试解决. 查看  /etc/hosts 中配置的 IP  ...

  7. 【HQL】常用函数

    CONCAT_WS(separator, str1, str2,...) 多列转1列,以分割符分割 使用场景: 1.多列在一列显示: 2.多列转多行作为辅助,结合split和explode使用 SEL ...

  8. 8.Appium的基本使用-2(安装node.js)

    node.js 下载地址:https://nodejs.org/en/download/下载 64-bit 下载包下载完成双击安装:

  9. mybatis-spring 集成

    http://www.mybatis.org/spring/zh/index.html http://www.mybatis.org/mybatis-3/zh/java-api.html 编程API: ...

  10. Python中续行符的注意事项

    转载自:https://blog.csdn.net/g_66_hero/article/details/78745608