Class isn;t changing color in hover in the whole p element-CodePudding

I've got an issue while I'm trying to change my p color in hover. The non hover color works with the class, but in hover only fa icon changes color, 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 ><i ></i> <a href="https://www.google.com/maps/" target="_blank" aria-label="Σύνδεση με εξωτερικό ιστότοπο www.google.com" rel="noopener">Test</a></p>
<p ><i ></i> <a href="tel:0030">2108</a></p>
<p ><i ></i> <a href="tel:0030">2109</a></p>
<p ><i ></i> <a href="tel:0030"> 69</a></p>
<p ><i ></i> <a href="mailto:[email protected]" aria-label="Σύνδεση με ηλεκτρονικό ταχυδρομείο ">[email protected]</a></p>

CodePudding user response：

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 ><i ></i> <a href="https://www.google.com/maps/" target="_blank" aria-label="Σύνδεση με εξωτερικό ιστότοπο www.google.com" rel="noopener">Test</a></p>
<p ><i ></i> <a href="tel:0030">2108</a></p>
<p ><i ></i> <a href="tel:0030">2109</a></p>
<p ><i ></i> <a href="tel:0030"> 69</a></p>
<p ><i ></i> <a href="mailto:[email protected]" aria-label="Σύνδεση με ηλεκτρονικό ταχυδρομείο ">[email protected]</a></p>