Below is my current CSS code:
.contact{
padding:1rem;
background:#023B6C;
padding:1rem;
position:fixed;
right:-20px;
top:27%;
z-index:99;
border-radius:5px 5px 0 0;
border:2px solid #fff;
transform:rotate(-90deg);
transition:all .5 ease;
}
.contact a{
font-size:1.2rem;
color:#fff;
transition:all .5 ease;
}
.contact a:hover{
color:#E5E5E5;
font-size:1.25rem;
}
.contact:hover{
padding:1.2rem;
}
The purpose of this CSS is to make the div slightly expand and change text size upon hovering over it. However, when not hovering directly over the text, the text remains unchanged while the div expands.
My goal is to modify the code so that when the div is hovered, the link inside the div changes without affecting the text size. I attempted enclosing all the code within .contact:hover, but the link was still styled by the default css.
To view a demonstration of my code, click on this jsFiddle link.