我正在尝试将内部文本更改为白色悬停颜色

Question

我有问题，使内部文本更改悬停颜色为白色。我正在使用：：之前: hover..当我悬停的时候，整个div都可以改变，但是文本仍然是黑色的，为什么我的代码不能工作？

​

    .feature {
    .feature-rect {
        position: relative;
        height: 180px;
        width: 270px;
        border-radius: 20px;
        background-color: $light-color;
        @include box-shadow($form-shadow);
        text-align: center;
        margin-bottom: 30px;
        padding: 20px;
        z-index: 1;
        display: block;
      }
      
      .feature-rect::before {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(180deg, #232153 0%, #6F2365 100%);
        z-index: -1;
        transition: opacity 0.5s linear;
        opacity: 0;
        border-radius: 20px;
        display: block;
        color: #fff;
        cursor: pointer;
        
      }
      .feature-rect:hover::before {
        opacity: 1;
      } 
      .feature-rect:hover{
        color:#fff;
      } 
    } 

     <div class="feature">
       <div class="feature-rect">
       <img src="{{ config('static.images') }}images/card_feature_icon_2.png">
       <div class="title-light-color-font-s mt-10">Lorem Ipsome</div>
       <div class="title-content-font-xs mt-10">Lorem Ipsome Lorem Ipsome Lorem Ipsome Lorem Ipsome</div>
       </div>
     </div>

​

Answer 1

​

.feature-rect {
    position: relative;
    height: 180px;
    width: 270px;
    border-radius: 20px;
    background-color: $light-color;
    @include box-shadow($form-shadow);
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    z-index: 1;
    display: block;
  }

  .feature-rect::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #232153 0%, #6F2365 100%);
    z-index: -1;
    transition: opacity 0.5s linear;
    opacity: 0;
    border-radius: 20px;
    display: block;
    color: #fff;
    cursor: pointer;

  }
  .feature-rect:hover::before {
    opacity: 1;
  } 
  .feature-rect:hover{
    color:#fff;
  } 
  
  
  
  .feature-rect:hover div{
   color:#fff !important;
  } 

 <div class="feature">
   <div class="feature-rect">
   <img src="{{ config('static.images') }}images/card_feature_icon_2.png">
   <div class="title-light-color-font-s mt-10">Lorem Ipsome</div>
   <div class="title-content-font-xs mt-10">Lorem Ipsome Lorem Ipsome Lorem Ipsome Lorem Ipsome</div>
   </div>
 </div>

​

Answer 2

嵌套(当你在其他花括号中有大括号的时候)不是css的一个特性，只是像sass和less这样的css预处理器的一个特性。因此，您需要像这样扩展嵌套：

​

.feature .feature-rect {
  position: relative;
  height: 180px;
  width: 270px;
  border-radius: 20px;
  background-color: $light-color;
  @include box-shadow($form-shadow);
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  z-index: 1;
  display: block;
}

.feature .feature-rect::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, #232153 0%, #6F2365 100%);
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
  border-radius: 20px;
  display: block;
  color: #fff;
  cursor: pointer;
}

.feature .feature-rect:hover::before {
  opacity: 1;
}

.feature .feature-rect:hover{
  color:#fff;
} 

<div class="feature">
       <div class="feature-rect">
       <img src="{{ config('static.images') }}images/card_feature_icon_2.png">
       <div class="title-light-color-font-s mt-10">Lorem Ipsome</div>
       <div class="title-content-font-xs mt-10">Lorem Ipsome Lorem Ipsome Lorem Ipsome Lorem Ipsome</div>
       </div>
     </div>

​