css question -easy, i think

I have the following code:

.cta-teal-outline {
	border: 3px dashed #1fbcc0;
	padding: 10px;
	border-radius: 10px;
	max-width: 400px;
}
.cta-teal {
	border-radius: 10px;
	padding: 15px;
	background-color: #1fbcc0;
	color: #fff;
}
.cta-teal a{
	color: #fff;
}
.cta-teal a:hover{
	background-color: #f48f4a;
}

<div class="cta-teal-outline"><div class="cta-teal"><a href="#">Subscribe Now</a></div></div>

Open in new window


On hover, I just want all the teal to change to orange. Meaning the background and dashed lines. No matter how many iterations I do, its never perfect.

Any ideas?
a204801Asked:
Who is Participating?
 
Russ SuterConnect With a Mentor Commented:
Try this:
.cta-teal-outline {
	border: 3px dashed #1fbcc0;
	padding: 10px;
	border-radius: 10px;
	max-width: 400px;
}
.cta-teal {
	border-radius: 10px;
	padding: 15px;
	background-color: #1fbcc0;
	color: #fff;
}
.cta-teal a{
	color: #fff;
}
.cta-teal-outline:hover {
	border-color: #f48f4a;
}
.cta-teal-outline:hover .cta-teal{
	background-color: #f48f4a;
}

Open in new window

0
 
a204801Author Commented:
works as expected. excellent solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.