a标签伪类选择器以及伪元素:hover的案例
1.通过我们的观察发现a标签存在一定的状态
1.1默认状态, 从未被访问过
1.2被访问过的状态
1.3鼠标长按状态
1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?
a标签的伪类选择器是专门用来修改a标签不同状态的样式的 3.格式
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式
4.注意点
4.1a标签的伪类选择器可以单独出现也可以一起出现
4.2a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
编写的顺序必须要个的遵守爱恨原则 love hate
4.3如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>86-a标签的伪类选择器</title>
<style>
/*
a:link{
color: tomato;
}
a:visited{
color: green;
}
a:hover{
color: orange;
}
a:active{
color: pink;
}
*/
a{
// 简写格式
color: green;
}
/*a:link{*/
/*color: green;*/
/*}*/
/*a:visited{*/
/*color: green;*/
/*}*/
a:hover{
color: orange;
}
a:active{
color: pink;
}
</style>
</head>
<body>
<a href="http://www.taobao.com">taobao</a>
<a href="http://www.jd.com">jd</a>
</body>
</html>
五. 下面是通过:hover来修改图片宽度而达到页面伸展的动画小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>92-过渡模块-手风琴效果</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 960px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
ul li{
list-style: none;
width: 160px;
height: 300px;
background-color: red;
float: left;
/*border: 1px solid #000;*/
/*box-sizing: border-box;*/
/*transition-property: width;*/
/*transition-duration: 0.5s;*/
transition: width 0.5s;
}
/*通过伪元素:hover修改鼠标悬停ul标签上的状态*/
/*当鼠标悬停在ul上, 就会修改ul的子元素li的宽度*/
ul:hover li{
width: 100px;
}
/*当鼠标悬停在ul的子元素li上时, 就会修改子元素li的宽度*/
ul li:hover{
width: 460px;
}
</style>
</head>
<body>
<ul>
<li><img src="data:images/ad1.jpg" alt=""></li>
<li><img src="data:images/ad2.jpg" alt=""></li>
<li><img src="data:images/ad3.jpg" alt=""></li>
<li><img src="data:images/ad4.jpg" alt=""></li>
<li><img src="data:images/ad5.jpg" alt=""></li>
<li><img src="data:images/ad6.jpg" alt=""></li>
</ul>
</body>
</html>
a标签伪类选择器以及伪元素:hover的案例的更多相关文章
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS选择器之伪类选择器(伪元素)
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)
11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...
- CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- 如何使用CSS3中的结构伪类选择器和伪元素选择器
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...
- day66-CSS伪类选择器和伪元素选择器
1. 伪类选择器:hover 和 focus 比较常用. 1.1 hover:把鼠标移动到内容迈腾2020款TSI DSG舒适型的时候,字体变成了红色. html: <body> < ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
随机推荐
- Data_r_and_w(csv,json,xlsx)
import osimport sysimport argparsetry: import cStringIO as StringIOexcept: import StringIOimpo ...
- 创建第一个core项目(netCore学习笔记1)
1.安装 core和netFramework其实是相对独立的,但是core的IDE是在vs2017才开始支持,而vs2017的安装环境必须搭配.net4.6,所以: Step1:安装.net4.6 S ...
- Jms的MessageListener中的Jms事务
摘要 一般来说,如果为JmsTemplate做了事务配置,那么它将会与当前线程的数据库事务挂钩,并且仅在数据库事务的afterCommit动作中提交. 但是,如果一个MessageListener在接 ...
- form表单发送请求实例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...
- Redis数据过期和淘汰策略详解(转)
原文地址:https://yq.aliyun.com/articles/257459# 背景 Redis作为一个高性能的内存NoSQL数据库,其容量受到最大内存限制的限制. 用户在使用Redis时,除 ...
- SSM-SpringMVC-15:SpringMVC中小论注解式开发之通配符篇
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 此处改了下标题,小论,为什么不说大话了呢?哎,质量不够啊,通配符篇提取不出更多可以讲的滔滔不绝的套路 通配符 ...
- c# xml操作(二)
c# xml操作(二) 此博文包含图片 (-- ::)转载▼ 标签: 杂谈 分类: c# 上次,我们介绍了增加和删除xml的一些操作,这次我们将介绍如何更改和读取xml特定节点.我们依然以上次的xml ...
- linux下设置phantomjs环境变量
1)vim /etc/profile2)在文件的最后一行,添加安装路径path语句:(注意路径是phantomjs的安装路径)export PATH=${PATH}:/usr/local/src/ph ...
- BZOJ_3427_Poi2013 Bytecomputer_DP
BZOJ_3427_Poi2013 Bytecomputer_DP Description 给定一个{-1,0,1}组成的序列,你可以进行x[i]=x[i]+x[i-1]这样的操作,求最少操作次数使其 ...
- 在 Less 中写 IE 的css hack
Less中直接在属性后面加hack写法会编译报错的.那么怎么解决呢? 第一种方式: IE7 以display:inline-block为例: less的hack写法: .box{ display: i ...