<div class="detail_list_icons"><div class="detail_list_icon"><img class="detail_list_image" src="{% static 'images/initiate1.png' %}"><a>分布式文件系统概述</a></div><div class="detail_list_icon"><img class="detail_list_image" src="{% static 'images/initiate1.png' %}"><a>HDFS概念</a></div><div class="detail_list_icon"><img class="detail_list_image" src="{% static 'images/initiate2.png' %}"><a> HDFS原理演示</a></div>
</div>

.detail_list_icon {

    border-bottom: 1px solid lightgrey;

    height:48px;

    width:220px;

.detail_list_icon:hover{

   background: #F0F0F0;

------------------------------------------------------------------------------------------------

  <!--num 1-->
  <div class="_initiate_outline_icon" ><div class="_initiate_outline_num"><a >1</a></div><div class="_initiate_outline_character">背景</div></div><!--num 2-->
  <div class="_initiate_outline_icon"><div class="_initiate_outline_num"><a>2</a></div><div class="_initiate_outline_character">分布式存储系统HDFS</div></div><!--num 3-->
  <div class="_initiate_outline_icon"><div class="_initiate_outline_num"><a>3</a></div><div class="_initiate_outline_character">MapReduce计算框架</div></div>

._initiate_outline_icon {position: relative;margin-left: auto;margin-right: auto;float:right;height:73px;/*left: 10px;*/
  top: 20px;padding-top: 22px;font-size:18px;width:100%;color: #FFFFFF;
}._initiate_outline_icon a {color:white ;
}._initiate_outline_icon:hover{background: white;color: #3D9DC5;
}

下面为什么这么写，要在

._initiate_outline_icon:hover后再

写一个

._initiate_outline_num？？？？？？？？？？

._initiate_outline_icon:hover ._initiate_outline_num{background: #3D9DC5;
}._initiate_outline_icon:hover ._initiate_outline_num a {color: #FFFFFF!important;
}

两个伪元素的配合使用

现在我们经常在 html 源码中看到如下的写法：

这里的 ::after 和 ::before 就是我们今天来探讨的 css 伪元素之二 - :before && :after。

伪元素

首先我们要明白什么是伪元素，css 设置伪元素是为了方便给某些选择器添加特殊的效果。伪元素的语法格式一般为：

selector:pseudo-element {property:value;}

这里的 property 是指伪元素的属性。此外，css 类也可以与伪元素配合使用，格式如下：

selector.class:pseudo-element {property:value;}

伪元素就是这样通过赋值给自己属性从而给指定的选择器添加上样式的效果。

:before

如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明：

.before:before{content:'you before'; color:red;}<div class="before"> me</div>

在这里我们给伪元素 :before 添加了属性 content，并赋值为 you before。我们来看效果：

//在指定元素的内容 me 前添加了新内容 you before

我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值为 inline，那么我们可不可以修改新内容区域的属性，答案是肯定的。你可以像修改其他元素一样修改它的样式，我们来将它的 display 属性值来改为block。

.before:before{content:'you before'; display:block; color:red;}
<div class="before"> me</div>

现在我们再来看下效果：

　//由伪元素 :before 生成新内容区域果然变为了块元素

content 属性

对于伪元素 :before 和 :after 而言，属性 content 是否为必选项呢？我们尝试把 content 移除。

.before:before{display:block; color:red;}
<div class="before"> me</div>

//没有了 content 属性，新内容自然是为空的
//同时我们查看 html 源码会发现，:before 是没有生效的

那么我们设为空呢？

.before:before{content:''; display:block; color:red;}
<div class="before"> me</div>

//新内容依然为空
//此时 :before 生效

所以我们明白，对于伪元素 :before 和 :after 而言，属性 content 是必须设置的，那么在上面的例子，我们知道属性的值可以为字符串，那么还可以为其他形式吗？答案是可以的，它还可以是指向一张图片的 URL:

 content: url( "img/icon.png" )

配合伪类使用

伪元素 :before 还可以配合伪类使用，这里举经常与 :before 配合使用的伪类 :hover 为例：

.before:hover:before{content:'you before'; color:red;}
<div class="before"> me</div>

//无内容

//鼠标移至 div 上时，新内容出现。

这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为 .before:before:hover 是无效的。

配合取值函数 attr() 使用

还有一种较为常见的用法，即配合取值函数 attr() 一起使用，如：

a::before{content: attr(title)}
<a href="http://www.segmentfault.com" title="专业面向开发者的中文技术问答社区"></a>

此时达到的效果相当于：

全选复制放进笔记

<a href="http://www.segmentfault.com">专业面向开发者的中文技术问答社区</a>

:after

伪元素 :after 与伪元素 :before 类型相同，只不过它指定的属性 content 值为出现在指定元素内容的后面，同样举例说明：

.after:after{content:'after you'; color:#F00;}
<div class="after">I </div>

//伪元素 :after 生成的新内容区域出现在指定元素内容的而后面

:after 其他特征与 :before 一致，可以参考上文，在此就不赘述。

css属性：hover相关推荐

css 的 hover属性详解
css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素.同级元素.相邻元素的样式 .hover 属性可以应用于任何元素,不仅仅是链接 .使用 hover ...
CSS入门-五个简单,但有用的CSS属性
今天说的这5个CSS属性,你可能会很熟悉,但是你可能会很少会去使用.这个教程所讲得不是关于CSS3的属性,而是依旧使用CSS2属性来说明,这些属性广泛的被各种浏览器所支持:clip,min-heigh ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
[转][HTML]css属性
1.字体属性(type) font-family(使用什么字体) font-style(字体的样式,是否斜体):normal/italic/oblique font-variant(字体大小写):no ...
CSS属性之attr()
attr()准确的说,不应该是一个属性,而是一个CSS的函数,我们先看看MDN上的介绍吧: Summary The attr() CSS function is used to retrieve th ...
css 属性选择器笔记
1.基本选择器: eg: *{margin:0;padding:0}p{color:black}.content{background:red;}#intro{padding-left:2em;} 2 ...
CSS属性和值--备份
CSS 属性和值属性 / 值描述和注释 background 任何 background-attachment.background- color.background-image.backgr ...
div点击穿透,CSS属性pointer-events :none;实现护眼模式, 夜间模式遮罩
.div-xx{ pointer-events :none;/*取消事件,点击穿透*/ } pointer-events , css属性值 auto--效果和没有定义pointer-events属性相 ...
CSS（一）：CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性；CSS选择器；尺寸和颜色单位、背景和文本设置
目录一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...

css属性：hover

伪元素