CODEWITHSUNDEEP
htmlcss
Ellenon
Ellenon

Reputation: 27

Class isn't changing color on hover on the whole paragraph element

I've got an issue while I'm trying to change my <p> colour in hover. The non-hover colour works with the class, but in hover, only the fa icon changes colour, and the text remains the same. What's the problem here? Is my syntax wrong?

.trfooter {
    transition: 0.3s;
    color:#3ecefd !important;
}

.trfooter:hover {
    transform: translatex(10px);
    transition: 0.3s;
    color: #004ce6 !important;
}
<p class="trfooter"><i class="fa-solid fa-location-arrow"></i> <a href="https://www.google.com/maps/" target="_blank" aria-label="Σύνδεση με εξωτερικό ιστότοπο www.google.com" rel="noopener">Test</a></p>
<p class="trfooter"><i class="fa-solid fa-phone"></i> <a href="tel:0030">2108</a></p>
<p class="trfooter"><i class="fa-solid fa-phone"></i> <a href="tel:0030">2109</a></p>
<p class="trfooter"><i class="fa-solid fa-mobile-screen-button"></i> <a href="tel:0030"> 69</a></p>
<p class="trfooter"><i class="fa-solid fa-envelope"></i> <a href="mailto:[email protected]" aria-label="Σύνδεση με ηλεκτρονικό ταχυδρομείο ">[email protected]</a></p>

Upvotes: 0

Views: 37

Answers (1)

Mihai T
Mihai T

Reputation: 17697

The color is from the a element. You need to change that on p:hover . No need to use !important

.trfooter, .trfooter a {
    transition: 0.3s;
    color:#3ecefd;
}

.trfooter:hover {
    transform: translatex(10px);

}
.trfooter:hover a {
    color: red;
}
<p class="trfooter"><i class="fa-solid fa-location-arrow"></i> <a href="https://www.google.com/maps/" target="_blank" aria-label="Σύνδεση με εξωτερικό ιστότοπο www.google.com" rel="noopener">Test</a></p>
<p class="trfooter"><i class="fa-solid fa-phone"></i> <a href="tel:0030">2108</a></p>
<p class="trfooter"><i class="fa-solid fa-phone"></i> <a href="tel:0030">2109</a></p>
<p class="trfooter"><i class="fa-solid fa-mobile-screen-button"></i> <a href="tel:0030"> 69</a></p>
<p class="trfooter"><i class="fa-solid fa-envelope"></i> <a href="mailto:[email protected]" aria-label="Σύνδεση με ηλεκτρονικό ταχυδρομείο ">[email protected]</a></p>

Upvotes: 3

Related Questions