I want to change the color of text inside anchor tag when hovered, but CSS doesn't allow referencing class

ujjawal_kumar 0
Viewed 33

I want to change the text color of anchor tag when hovered on the item, but how can I select anchor tag inside services-list div:hover.

body{
  background: black;
  color: white;
}

.services-list div a {
  text-decoration: none;
  color: #e5f7ef;
  font-size: 12px;
  margin-top: 20px;
  display: inline-block;
}

.services-list div:hover {
  background-color: #43ffaf;
  color: #262a33;
  transform: translateY(-10px);
}
<div class="services-list">
    <div>
        <p>texts</p>
        <a href="#">Learn More</a>
    </div>
</div>

css-selectors css html
1 Answers

Also write rule set for anchor tag when hovered.

body{
  background: black;
  color: white;
}

.services-list div a {
  text-decoration: none;
  color: #e5f7ef;
  font-size: 12px;
  margin-top: 20px;
  display: inline-block;
}

.services-list div:hover {
  background-color: #43ffaf;
  color: #262a33;
  transform: translateY(-10px);
}

.services-list div:hover > a {
  color: #262a33;
}
<div class="services-list">
    <div>
        <p>texts</p>
        <a href="#">Learn More</a>
    </div>
</div>

ujjawal_kumar0
Related