Solved

css question -easy, i think

Posted on 2016-10-05
2
28 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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

708 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

18 Experts available now in Live!

Get 1:1 Help Now