CODEWITHSUNDEEP
htmlcss
raphael-allard
raphael-allard

Reputation: 319

How can I get my arrow changing color with :hover within a div?

I read many threads but I can't still figure out why my arrow doesn't change color at the same time than my box when I hover it, if anyone could help me, I'll appreciate !

First, I tried with :before but with no results as well...

Thx for your help !

Here my code :

.career_block_left {
    width: 500px;
    height: 200px;
    text-align: right;
    margin: 40 40 40 40;
    padding: 15px;
    justify-items: center;
    font-size: 18px;
    border: 1px solid #58595F;
    border-radius: 5px;
    position: relative;
    background: #F0F0F0;
}

.right_arrow {
    content: "";
    width: 40px;
    height: 40px;
    background: #F0F0F0;
    position: absolute;
    top: 52px;
    right: -21px;
    border-right: 1px solid #58595F;
    border-top: 1px solid #58595F;
    transform: rotate(45deg);
}

.career_block_left:hover {
    background: #1B2021;
    color: #E0F2E9;
}

.career_block_left:hover .right_arrow:hover {
    background: #1B2021;
    color: #E0F2E9;
}
<div class="career_block_left">
  <h4>Développeur web (formation)</h4>
  <h5>Le Wagon, Paris, FRANCE</h5>
  <p>Formation de deux mois au sein de l'école du Wagon dans le but de devenir développeur full stack</p>
  <p>Octobre 2020 - Décembre 2020</p>
<div class="right_arrow"></div>

Upvotes: 1

Views: 415

Answers (2)

Riyas Ac
Riyas Ac

Reputation: 1613

please close final divof class career_block_left and remove :hover of class .right_arrow in .career_block_left:hover .right_arrow:hover

.career_block_left {
    width: 500px;
    height: 200px;
    text-align: right;
    margin: 40 40 40 40;
    padding: 15px;
    justify-items: center;
    font-size: 18px;
    border: 1px solid #58595F;
    border-radius: 5px;
    position: relative;
    background: #F0F0F0;
}

.right_arrow {
    content: "";
    width: 40px;
    height: 40px;
    background: #F0F0F0;
    position: absolute;
    top: 52px;
    right: -21px;
    border-right: 1px solid #58595F;
    border-top: 1px solid #58595F;
    transform: rotate(45deg);
}

.career_block_left:hover {
    background: #1B2021;
    color: #E0F2E9;
}

.career_block_left:hover .right_arrow {
    background: #1B2021;
    color: #E0F2E9;
}
<div class="career_block_left">
  <h4>Développeur web (formation)</h4>
  <h5>Le Wagon, Paris, FRANCE</h5>
  <p>Formation de deux mois au sein de l'école du Wagon dans le but de devenir développeur full stack</p>
  <p>Octobre 2020 - Décembre 2020</p>
<div class="right_arrow"></div>
</div>

Upvotes: 1

JHeth
JHeth

Reputation: 8356

Just remove the final :hover in your stylesheet. No need to check for hover on the child when you've checked hover on the parent element.

.career_block_left {
    width: 500px;
    height: 200px;
    text-align: right;
    margin: 40 40 40 40;
    padding: 15px;
    justify-items: center;
    font-size: 18px;
    border: 1px solid #58595F;
    border-radius: 5px;
    position: relative;
    background: #F0F0F0;
}

.right_arrow {
    content: "";
    width: 40px;
    height: 40px;
    background: #F0F0F0;
    position: absolute;
    top: 52px;
    right: -21px;
    border-right: 1px solid #58595F;
    border-top: 1px solid #58595F;
    transform: rotate(45deg);
}

.career_block_left:hover {
    background: #1B2021;
    color: #E0F2E9;
}

.career_block_left:hover .right_arrow {
    background: #1B2021;
    color: #E0F2E9;
}
<div class="career_block_left">
  <h4>Développeur web (formation)</h4>
  <h5>Le Wagon, Paris, FRANCE</h5>
  <p>Formation de deux mois au sein de l'école du Wagon dans le but de devenir développeur full stack</p>
  <p>Octobre 2020 - Décembre 2020</p>
<div class="right_arrow"></div>

Upvotes: 2

Related Questions