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 ...
随机推荐
- 使用jQuery编辑删除页面内容,两种方式
第一种,比较少的编辑用这种,直接在那块内容上编辑,失去焦点即完成 前几天做编辑框的时候,需要只修改一个状态 //编辑角色 function editTr($this){ thatTd=$($this) ...
- 通俗理解cookies,sessionStorage,localStorage的区别
sessionStorage .localStorage 和 cookie 之间的区别共同点:都是保存在浏览器端,且同源的. 区别:cookie数据始终在同源的http请求中携带(即使不需要),即co ...
- 关系型数据库和NoSQL数据库
一.数据库排名和流行趋势 1.1 Complete ranking 链接: https://db-engines.com/en/ranking 在这个网站列出了所有数据库的排名,还可以看到所属数据库类 ...
- pymysql-connect阻塞
class Connection(object): """ Representation of a socket with a mysql server. The pro ...
- iframe之父子页面通信
iframe之父子页面通信 1.获取 子页面 的 window 对象 在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...
- JsonConvert
///"{'jsonParam' : " + jsonText + "}" /* Dictionary<string, object> tmp = ...
- APPium-Xpath,swipe练习
写自动化测试,实现 滚动到 口碑最佳 部分,并且打印出所有 口碑最佳 部分的5个应用名称 # coding:utf-8from appium import webdriverimport time d ...
- 深度学习原理与框架-卷积网络细节-图像分类与图像位置回归任务 1.模型加载 2.串接新的全连接层 3.使用SGD梯度对参数更新 4.模型结果测试 5.各个模型效果对比
对于图像的目标检测任务:通常分为目标的类别检测和目标的位置检测 目标的类别检测使用的指标:准确率, 预测的结果是类别值,即cat 目标的位置检测使用的指标:欧式距离,预测的结果是(x, y, w, h ...
- django组件:中间件
全局性的逻辑处理 一.中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨 ...
- SITE STRUCTURE
SITE STRUCTURE HTML Review Congratulations! You've learned enough HTML to create a great website! Be ...