How do I change my link colors when I hover a div?
I tried to use:
#voltarTEST {
width: 80px;
height: 62px;
padding-top: 16px;
background-image: url(../img/multiLangImage/Seta11.png);
background-repeat: no-repeat;
}
#seguinteBtn {
width: 80px;
height: 62px;
padding-top: 16px;
background-image: url(../img/multiLangImage/Seta21.png);
background-repeat: no-repeat;
text-decoration: none;
color: #777;
}
#seguinteBtn:hover {
background-image: url(../img/multiLangImage/Seta22.png);
background-repeat: no-repeat;
text-decoration: none;
color: #FFF;
}
#voltarText {
/* padding-right: 10px;*/
padding-left: 30px;
}
#voltarNEText {
/* padding-right: 10px;*/
padding-left: 30px;
}
#voltarTEST:hover {
background-image: url(../img/multiLangImage/Seta12.png);
background-repeat: no-repeat;
}
#voltarTEST a {
text-decoration: none;
font-size: x-small;
font-family: Verdana;
text-decoration: none;
color: #999;
}
#voltarTEST a:hover {
text-decoration: none;
font-size: x-small;
font-family: Verdana;
text-decoration: none;
color: #FFF;
}
#dataUltimaSincMSG {
margin-bottom: 0;
}
#estadoSinc {
margin-bottom: 0;
}
But that did not work, this only changes color when I hover over the link.
To change the color of your link on hover, use the :hover pseudo property on the link's class and give it a different color.
To change the link color, we have to use the color property of CSS. The name of the color can be given in any valid format, such as the color name, rgb() value, or HEX value.
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
Add this:
#voltarTEST:hover a{
text-decoration: none;
font-size: x-small;
font-family: Verdana;
text-decoration: none;
color:#FFF;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With