Solved

Can't transition :target, what's wrong with my code?

Posted on 2014-11-10
3
91 Views
Last Modified: 2014-11-13
I'm just trying to create a sample of transitioning :target. The targeting works, but the transition isn't. Can somebody please tell me why? Thanks.

<!DOCTYPE html>
<html>
<head>
<style>
#news1 {
	background-color: white;
	-webkit-transition: background-color, 2s, ease, .1s;
	-moz-transition: background-color, 2s, ease, .1s;
	-o-transition: background-color, 2s, ease, .1s;
	-ms-transition: background-color, 2s, ease, .1s;
	transition: background-color, 2s, ease, .1s;
}
#news2 {
	background-color: white;
	-webkit-transition: background-color, 2s, ease, .1s;
	-moz-transition: background-color, 2s, ease, .1s;
	-o-transition: background-color, 2s, ease, .1s;
	-ms-transition: background-color, 2s, ease, .1s;
	transition: background-color, 2s, ease, .1s;
}
#news1:target {
	border: 2px solid #FF0000;
	background-color: #e5eecc;
}
#news2:target {
	border: 2px solid #FF0000;
	background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

</body>
</html>

Open in new window

0
Comment
Question by:elepil
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 

Author Comment

by:elepil
ID: 40440207
Just in case anyone's wondering why I think this isn't working, when clicking one of the links, the target is supposed to transition in background color, i.e., the background color should change gradually, not abruptly, and I don't know why the transition is not working. Thanks.
0
 
LVL 50

Accepted Solution

by:
Steve Bink earned 500 total points
ID: 40440345
Remove the commas from your transition declarations.
#news1 {
	background-color: white;
	-webkit-transition: background-color 2s ease .1s;
	-moz-transition: background-color 2s ease .1s;
	-o-transition: background-color 2s ease .1s;
	-ms-transition: background-color 2s ease .1s;
	transition: background-color 2s ease .1s;
}
#news2 {
	background-color: white;
	-webkit-transition: background-color 2s ease .1s;
	-moz-transition: background-color 2s ease .1s;
	-o-transition: background-color 2s ease .1s;
	-ms-transition: background-color 2s ease .1s;
	transition: background-color 2s ease .1s;
}

Open in new window

0
 

Author Closing Comment

by:elepil
ID: 40440357
Oh good grief, I must've been really tired when I did this. Thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

732 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