當前或後懸停然後顏色不起作用

Question

當我試圖在我的價格表部分懸停（使用之前懸停後），然後背景改變，但顏色不起作用。

這裏是我的標記

<div class="col-lg-4 col-md-4- col-sm-4 col-xs-12"> 
      <div class="single-price-table price-tbl-active"> 
       <div class="price-header"> 
       <h3>Startup</h3> 
       </div> 
       <div class="price-content pptb-30"> 
       <h4> <sub> $ </sub> 279 </h4> 
       <span>/month</span> 
       <ul> 
        <li>20 Users</li> 
        <li>Unlimited Plan</li> 
        <li>Custom Design</li> 
        <li>Lorem Ipsum</li> 
        <li>Unlimited Time</li> 
       </ul> 
       </div> 
       <div class="price-footer"> 
       <a href="">Get Started Now</a> 
       </div> 
      </div> 
      </div> 

這裏是我的樣式表代碼：

.single-price-table{ 
position:relative; 
} 
    .single-price-table:first-child::before { 
     background: #283754 none repeat scroll 0 0; 
     content: ""; 
     height: 10%; 
     left: 0; 
     position: absolute; 
     width: 100%; 
     opacity: 0; 
     color:#ffffff; 
    } 
    .single-price-table:hover:first-child::before{ 
     opacity: 1; 
    } 
    .single-price-table:last-child::after { 
     background: #283754 none repeat scroll 0 0; 
     content: ""; 
     height: 10%; 
     left: 0; 
     position: absolute; 
     width: 100%; 
     opacity: 0; 
     color:#ffffff; 
    } 
    .single-price-table:hover:last-child::after{ 
     opacity: 1; 

    } 

Answer 1

使用

.single-price-table:first-child:hover::before { 

不

.single-price-table:hover:first-child::before { 

首先找到的選擇那麼，元件之前

.single-price-table { 
 
    position: relative; 
 
} 
 

 
.single-price-table:first-child::before { 
 
    background: #283754 none repeat scroll 0 0; 
 
    content: ""; 
 
    height: 10%; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    opacity: 0; 
 
    color: #ffffff; 
 
} 
 

 
.single-price-table:first-child:hover::before { 
 
    opacity: 1; 
 
} 
 

 
.single-price-table:last-child::after { 
 
    background: #283754 none repeat scroll 0 0; 
 
    content: ""; 
 
    height: 10%; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    opacity: 0; 
 
    color: #ffffff; 
 
} 
 

 
.single-price-table:last-child:hover::after { 
 
    opacity: 1; 
 
}

<div class="col-lg-4 col-md-4- col-sm-4 col-xs-12"> 
 
    <div class="single-price-table price-tbl-active"> 
 
    <div class="price-header"> 
 
     <h3>Startup</h3> 
 
    </div> 
 
    <div class="price-content pptb-30"> 
 
     <h4> <sub> $ </sub> 279 </h4> 
 
     <span>/month</span> 
 
     <ul> 
 
     <li>20 Users</li> 
 
     <li>Unlimited Plan</li> 
 
     <li>Custom Design</li> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Unlimited Time</li> 
 
     </ul> 
 
    </div> 
 
    <div class="price-footer"> 
 
     <a href="">Get Started Now</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

添加顏色應用的懸停h3

.single-price-table:hover:first-child h3{ 
color:#fff; 
} 

和z-index來。

.single-price-table{ 
 
position:relative; 
 
} 
 
    .single-price-table:first-child::before { 
 
     background: #283754 none repeat scroll 0 0; 
 
     content: ""; 
 
     height: 10%; 
 
     left: 0; 
 
     position: absolute; 
 
     width: 100%; 
 
     opacity: 0; 
 
     color:#ffffff; 
 
     z-index:-1 
 
    } 
 
    .single-price-table:hover:first-child h3{ 
 
    color:#fff; 
 
    } 
 
    .single-price-table:hover:first-child::before{ 
 
     opacity: 1; 
 
    } 
 
    .single-price-table:last-child::after { 
 
     background: #283754 none repeat scroll 0 0; 
 
     content: ""; 
 
     height: 10%; 
 
     left: 0; 
 
     position: absolute; 
 
     width: 100%; 
 
     opacity: 0; 
 
     color:#ffffff; 
 
    } 
 
    .single-price-table:hover:last-child::after{ 
 
     opacity: 1; 
 

 
    }

<div class="col-lg-4 col-md-4- col-sm-4 col-xs-12"> 
 
      <div class="single-price-table price-tbl-active"> 
 
       <div class="price-header"> 
 
       <h3>Startup</h3> 
 
       </div> 
 
       <div class="price-content pptb-30"> 
 
       <h4> <sub> $ </sub> 279 </h4> 
 
       <span>/month</span> 
 
       <ul> 
 
        <li>20 Users</li> 
 
        <li>Unlimited Plan</li> 
 
        <li>Custom Design</li> 
 
        <li>Lorem Ipsum</li> 
 
        <li>Unlimited Time</li> 
 
       </ul> 
 
       </div> 
 
       <div class="price-footer"> 
 
       <a href="">Get Started Now</a> 
 
       </div> 
 
      </div> 
 
      </div>