css屬性：hover

  
          
    
<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

:

配合僞類使用

僞元素 

: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>
           

此時達到的效果相當于：

全選 複制 放進筆記

:after

僞元素 

:after

 與 僞元素 

:before

 類型相同，隻不過它指定的屬性 

content

 值為出現在指定元素内容的後面，同樣舉例說明：

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

 //僞元素 

:after

 生成的新内容區域出現在指定元素内容的而後面

:after

 其他特征與 

:before

 一緻，可以參考上文，在此就不贅述。