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!
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'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..
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
Trying to apply a transition on :hover with a different delay for the start and end of the event. CSS below changes the color over .25s after a .35s delay - I want to change the delay to 1.5s when the hover state ends... Any suggestions?
span {
transition:.25s linear .35s;
color:white
}
span:hover {
color:black
}
Sorted - needed to break the transition out into a comma-separated list for each transitioned element, then specify a different delay value. Easy really, in hindsight.
I am trying to follow this tutorial because I like the effect so much.
CSS Text Glow on Hover with Transition Effects
But the problem is, I set the background color to white.
<style>
.text-glow-hover-with-delay{
background: #FFFFFF;
color: #fff;
transition: text-shadow 3s;
-moz-transition: text-shadow 3s; /* Firefox 4 */
-webkit-transition: text-shadow 3s; /* Safari and Chrome */
-o-transition: text-shadow 3s; /* Opera */
}
.text-glow-hover-with-delay:hover{
text-shadow: 0 0 10px #fff;
}
</style>
<div class="text-glow-hover-with-delay">
Put your mouse over me and I will glow slowly.
</div>
and now it doesn't glow anymore. I'm noob on CSS here. :(
May be you are not able to see the shadow cause its white.
But, its working fine and smoothly. Just reduce the time, 3 seconds are too much.
Here is the working DEMO
OR, if you just want a white shadow See Here
I removed the transition CSS as it seemed to be messing it up and I changed the color tpo black:
http://jsfiddle.net/Ce5SB/
For css transitions you must go from point A to point B.
This means that point A should have a default text-shadow on your default class.
.text-glow-hover-with-delay{
text-shadow:0 0 0 #fff;/*This is the missing piece*/
....
}
With the above missing piece, point B will know where to transition from.
also let me know if the above doesn't work. You may also want to try the transition as
transition:all 300ms ease;/*just in case each browser wants to capture its browser specific text shadow property*/