在悬停之前或之后，颜色不起作用

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 {

首先找到选择器然后应用悬停

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

为h3

添加颜色

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

和z-index到元素之前。

＆＃13;

＆＃13;

.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;

    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;