CODEWITHSUNDEEP
css
traffse
traffse

Reputation: 17

Hover does not change the font color

I have this code:

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

If the cursor hovers over the lettering - the background color changes and the inscription "19 października 2019" changes to white. It works fine.

The background color for the string does not change: xxxxx zzzzz.

How to fix it?

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

Upvotes: 0

Views: 73

Answers (1)

Pete
Pete

Reputation: 58422

My tip would be not to use such long selectors - you are making maintainability a lot harder and the efficiency of the selectors a lot lower as well as making it harder to override things which is probably why you are using !important like that

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

Upvotes: 2

Related Questions