I'm trying to make it so that when a link has been visited, it is persistently a certain color AND a certain opacity that matches non-visited links when WebKit fully transitions them.
Using this:
a:visited {
color:#cc7839;
opacity:0.1;
}
I can get the visited links to always be that color, except opacity isn't doing anything. I set it to 0.1 to make it easier to see if it was working.
When I hover over a visited link, it transitions to the opaque color set by WebKit for a:link:hover.
Here's the CSS that's in another file for setting all links:
a:link:hover,a:hover,a:visited:hover {
color: #cc7839;
opacity:0.8;
text-decoration:none;
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
}
I'm thinking I have to change something with the latter CSS in terms of which a elements it specifies?
Not possible. You can only use the :visited selector to change the color of an element. Thus opacity doesn't work.
SEC7115
:visited and :link styles can only differ by color.
Reference here - Was unable to find W3 documentation stating it..
Related
Yesterday I got my problem solved about jquery, which didn't load correctly. Today I struggle with yet another problem: two transitions for one element. The first transition starts when the page has loaded: it fades in. This one actually works when I do not use my second transitions. My second transitions must start whenever someone hovers over the ul. The problem is that the hover transitions 'overwrites' the fade-in transition. My jsFiddle:
http://jsfiddle.net/2cpX6/6/
Thanks in advance.
CSS rules with the same name override each other, just like any other rule.
Try this:
transition: opacity 2s ease-in, color 0.3s ease-in-out;
Note that you only need transition and -webkit-transition, since Firefox and Opera now fully support the unprefixed version, and -ms-transition never existed.
You can't put the same CSS rule for the same ruleset without it being overwritten. This applies to everything. For example, if you had:
span {
color: red;
color: green;
}
The spans would be green. This means that you cannot stack transition rules for the same ruleset.
You can create multiple separate transition rules using a comma.
transition: opacity 2s ease-in, color .3s ease-in-out;
http://jsfiddle.net/ExplosionPIlls/2cpX6/7/
I have a question about rendering speed for the css3 transition property.
Suppose I have a number of elements:
div, span, a {transition: all}
div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
It's much more efficient to target all of the transitions for all of those elements using one declaration div, span, a {transition: all}. But my question is: would it be "faster" in terms of the smoothness and quickness of the animation rendering to target each element's specific transition property? For example:
div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
My logic in asking this is that if the css "engine" has to search for "all" transition properties even if there is just one single property for an element, that it might slow things down.
Does anyone know if that's the case? Thanks!
Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won't see it, like the color changes, dimension changes etc.
The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to change the zoom level or the font's size and you'll see that everything become animated.Of course there couldn't be a lot of such user interactions, but there could be some interface changes that can cause the reflow and repaints in some blocks, that could tell the browser to try and animate those changes.
So, in general, it's recommended that you won't use the transition: all and would use the direct transitions instead.
There are some other things that can go wrong with the all transitions, like the splash of animation on page load, where it would at first render the initial styles for blocks and then apply the style with an animation. In a lot of cases it wouldn't be the thing that you want :)
I've been using all for cases where I needed to animate more than one rule. For example, if I wanted to change the color & background-color on :hover.
But it turns out that you can target more than one rule for transitions, so you never need to resort to the all setting.
.nav a {
transition: color .2s, text-shadow .2s;
}
I have this JS Fiddle that works well, making my custom title display on mouseover and hide on mouseout. The problem I am having when transporting it to real world environment is that the ~ tilde selector doesn't work anymore. Is there another way to do this? My .message div is at very end of page ( as I had to close SVG tags first ), so I know the + plus selector won't work.
I realized that the real problem on my webpage as opposed to the fiddle is that my button class items are svg elements and while the tilde targeting works properly if the two elements are non svg, it doesn't work properly if one element is svg and the other isn't.
I added an svg element of the same class "button" to the Fiddle to demonstrate this issue.
If anyone can show me how to properly target this, I will be most grateful.
JS Fiddle Here
.button:hover ~ .message {
opacity: 1;
transition: opacity .6s ease-in;
-moz-transition: opacity .6s ease-in;
-webkit-transition: opacity .6s ease-in;
}
Am I missing something? Is there a reason you can't just apply class="button" to the SVG? It seems to achieve what you are after.
Demo here
Update
Instead of trying to achieve the message show with pure CSS, just use a little extra jQuery. Add a class to the message element when you mouseover "button".
$('.message').addClass("visible-message");
Then remove it again when you mouseout.
Demo here
Please can somebody explain the following.
I believe that a transition can be triggered by, for example, hovering.
My hover style should contain the CSS that I want my element to have at the end of the transition (in this case color:red).
The browser will then transition from the original css to the hover css using the time duration specified on the original unhovered css.
a{
color:blue;
transition: color 1s;
}
a:hover{
color:red;
}
This works perfectly.
BUT what if I want the transition from non-hover to hover to be instant? From experimenting, it appears to work if I add transition: color 0s; to my hover css. But to me this doesn't make sense, because my a css still has the 1second duration. If anything, I would expect adding this would cause a 1s transition on hover and a 0s transition when the mouse is moved away.
Can somebody explain where my understanding is wrong?
It's the duration of the transition to that state.
So adding 0 to hover means it will be a 0s transition to the hover state and then a 1s transition back to non-hover.
If it's only on the original non-hover then the transition applies to both.
this is the situation. If you make that opposite, it works perfectly.
Test
css:
a{
color:blue;
transition: color 0s;
}
a:hover{
transition: color 1s;
color: peachpuff;
}
see jsfiddle.
Enjoy!
(For browsers that support CSS transitions, including the latest versions of Firefox, Safari, and Chrome. Strangely, this issue does not appear in Opera.)
Has anyone else noticed this? When you put a color transition on a:link, the a:visited transitions to the a:link color before displaying the a:hover color. Check it out:
http://jsfiddle.net/Mgzv9/2/
Can this color flicker be avoided?
I have been banging my head around this problem for a while.
The thing is, that this problem is actually hard to reproduce.
OK, so what happens, sometimes while loading/refreshing a page with color transition on links, the color is first transitioned from the default browser link color, to the CSS defined color. It actually doesn't happen for me, when I open the HTML from disk, but if I put it in a server (even local server), then this problem shows up.
To reproduce the problem, create an HTML, add a stylesheet and define a transition for links, something like this:
a {
color: red;
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
-o-transition: color .5s linear;
-ms-transition: color .5s linear;
transition: color .5s linear;
}
a:hover {
color: green;
}
...and then include the stylesheet in your HTML.
Put the files on a server, and try opening the page in Chrome, try refreshing the site, sometimes you should first see a transition from the default blue color, when the pages loads.
After deconstructing some sites, where there seemed to be no problem with this, I came up with this simple solution.
If you include some Javascript files too, then just place Javascript includes AFTER your CSS includes.
It even work if you just include an empty JS file, after you stylesheet.
Hope this helps!
I never seen it happen while using color. But yea it happens when using images in baground.This is bcoz of the loading time, and can be avoided by using all the transition images in one big image and use baground-position property to control the image.