Solved

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

Posted on 2014-11-10
3
88 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
  • 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

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

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 61
Glitch when viewing from computer to mini-window(smartphone) 1 44
Syntax Error 2 45
Footer at the bottom of the page not centered 5 28
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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... …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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 …

910 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

22 Experts available now in Live!

Get 1:1 Help Now