css question -easy, i think

a204801
a204801 used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Senior Software Developer
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

Author

Commented:
works as expected. excellent solution.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial