html - 我正在尝试使内部文本在悬停颜色为白色时发生变化

Question

我无法在悬停颜色为白色时更改内部文本。我正在使用::before: 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>