Hover не меняет цвет шрифта

Question

У меня есть этот код:

.indexKomunikatyHover:hover>.indexKomunikatyHoverA>.indexKomunikatyData,
.indexKomunikatyHover:hover,
indexKomunikatyHoverLink.a:hover {
  background-color: #A92525;
  color: white;
  border-radius: 15px;
}

.indexKomunikatyHover:hover a>.indexKomunikatyHoverA>.indexKomunikatyData,
indexKomunikatyHoverLink:hover a {
  color: white !important;
}

.indexKomunikatyHover>.indexKomunikatyHoverA>.indexKomunikatyData,
.indexKomunikatyHover a {
  color: #0B3375;
}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding0 padding2 indexKomunikatyHover">
  <a href="http://localhost/Messages" class=" indexKomunikatyHoverLink">
    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9  ">
      <div class="indexKomunikatyTytul">xxxxx zzzzz
      </div>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3  indexKomunikatyHoverA">
      <div class="indexKomunikatyData ">19 października 2019</div>
    </div>
  </a>
</div>

Если курсор находится над буквой - цвет фона изменится, а надпись «19 października 2019» изменится на белый.Работает нормально.

Цвет фона строки не меняется: xxxxx zzzzz.

Как это исправить?

Prwiev: https://jsfiddle.net/q3awthku/

Answer 1

Мой совет - не использовать такие длинные селекторы - вы значительно усложняете обслуживание и значительно снижаете эффективность селекторов, а также усложняете переопределение, поэтому, вероятно, вы используете !important какчто

.indexKomunikatyHover a { /* original colour of anchors */
  color: #0B3375;
}

.indexKomunikatyHover:hover {  /* just change background on main div */
  background-color: #A92525;
  border-radius: 15px;
}

.indexKomunikatyHover:hover a { /* just change the colour on anchors when main div is hovered */
 color: white;
}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding0 padding2 indexKomunikatyHover">
  <a href="http://localhost/Messages" class=" indexKomunikatyHoverLink">
    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9  ">
      <div class="indexKomunikatyTytul">xxxxx zzzzz
      </div>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3  indexKomunikatyHoverA">
      <div class="indexKomunikatyData ">19 października 2019</div>
    </div>
  </a>
</div>