Solved

css question -easy, i think

Posted on 2016-10-05
2
38 Views
Last Modified: 2016-10-05
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?
0
Comment
Question by:a204801
2 Comments
 
LVL 20

Accepted Solution

by:
Russ Suter earned 500 total points
ID: 41830852
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
 

Author Closing Comment

by:a204801
ID: 41830856
works as expected. excellent solution.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now