Don't apply CSS transition from focus to blur - css

Apologies if this question has been asked; I tried a lot of different wording trying to find an answer but to no avail!
Basically I'm using CSS transitions on my inputs (only for border-color).
When hover over or hover out, I want the transition to be applied.
When focusing and unfocusing, I want the CSS to be instant (i.e. no transition duration).
So far, I have the hovers working fine, the blur to focus is instant, but the focus to blur is taking the transition property.
My code at the moment is as follows:
input{
border:1px solid #444444;
transition:border-color 1s;
}
input:hover{ border-color:#666666; transition:border-color 1s; }
input:focus{ border-color:#D26D22; transition:none; }`
I know I could easily do this with JQuery, but I'd like a CSS solution if it's possible, thanks.
Edit: Fiddle showing this here https://jsfiddle.net/xamy95uv/

You can use input:not(:focus){transition:none}

Related

Problem with custom link cursor in Chrome

I want to use a custom cursor on hover for links. It works fine on Safari and Firefox, but on Chrome it jumps back to the default cursor for a millisecond, and then goes to my custom cursor.
Codepen: https://codepen.io/ford1234/pen/vwzRgJ
I've recreated the problem in Codepen but it also happens on the site I'm applying it to.
<div>
<p>Hello</p>
</div>
<style>
html {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/02/black-01.png'), auto;
}
a:hover {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), auto;
}
Expected result: A transition from the circle to the triangle.
Actual result: A transition from the circle, to the default hand pointer, to the triangle.
remove ":hover" on your selector.
your selector must be;
a{
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'),
auto; }
Have you tried out a transition-duration or a transition-delay? This is used to define the duration of a specified transition. This is the length of time it will take for the targeted element to transition between two defined states.
.example {
transition-duration: 0s;
// or
transition-delay: -1s;
}
Also keep in mind that some features are only supported by certain versions of the browser.

iron-overlay-backdrop style not being applied

I have a custom element which has an iron-overlay-backdrop as a child element (inside a paper-dialog). I am trying to increase the fade time (which I can do if I can edit the css in chrome). When I try and apply changes to the style --iron-overlay-backdrop the changes are not being applied in the child. What I have is:
<style>
:host {
--iron-overlay-backdrop: {transition: opacity 5s;};
}
</style>
I have also tried something simpler with --iron-overlay-backdrop-opacity: 0.8 which does not work either. For some reason the style is not being applied. Does anyone know what I am doing wrong, or how I can get the desired behavior of a longer transition time?
The custom property for the overlay backdrop is : --iron-overlay-backdrop-opacity
you can set the opacity of the host and it's transition this way
:host{
opacity: var(--iron-overlay-backdrop-opacity, 0.8);
transition: opacity 5s;
}

CSS Hover different on/off transition

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!

Disable/remove css3 transitions after :active psuedo-class

So I have a typical scenario: a button styled to transition its colour when hovered over using the :hover psuedo-class.
The button also has a :active triggered class, so that it changes colour again when clicked on; but this time I don't want a transition, so this class has all transitions disabled (I want the change to be snappy).
The problem I have is that whilst this works for the mousedown part of a click, it doesn't for the mouseup part because the :active state is no longer present once the mouse button has been released, and this causes the transitions (that are part of the class definition for the button) to apply.
Is there a way of getting this to work such that hover in/out applies a change with a transition but click down/up does not?
I could probably redo the behaviours in jQuery; but ideally I'd like to achieve this without resorting to JavaScript.
A working example is here.
Thanks.
You can do that with a trick
for instance, you can change the color, not with the background, but with a shadow:
button:active {
-webkit-box-shadow: inset 0 0 100px green;
}
then, the only remaining change that you is to limit the transition to background-color, instead of all
button {
transition: background-color 1s;
}
Not really what you wanted, but as close as I can get :-)
This can be done with only CSS by adding different transitions to the active button state and the base button state.
Add a transition of none to the base button, which means that a transition to the base state will be instant.
Then, add the desired transition to the button, which means that a transition to the active state (mouse down) will take time.
Here's some example CSS: http://codepen.io/anon/pen/hEmbl
button {
background:#009;
color:#fff;
padding:1em;
border:0;
border-radius:4px;
-webkit-transition:none;
}
button:active {
background:#090;
-webkit-transition:all 1s;
}
I think what you want to do is to use the :focus pseudo to keep your green 'state' active:
button:active, button:focus {
transition: none;
box-shadow: inset 0 0 100px green;
/*background-color: #00f;*/
}
http://codepen.io/anon/pen/tgJcf
NOTE: This works in IE11 and newest Webkit/Blink version(s), but not Firefox, at the time of this writing. Firefox does keep the active state of the button and is probably bugged there.

CSS3 Transitions

I want to change the background color of the page when one hovers over a button/div tag using only CSS3 transitions. I want the color to come gradually and hence would like to use a transition effect, but I don't know how to relate the background color of the page to a hover event on a div. Can someone please help me with my code ? Thank You
This is not currently possible in CSS3.
In the future (CSS4?), you'll be able to do it as follows:
body {
background-color: red;
transition: background-color 1s ease;
}
$body #theButton:hover {
background-color: green;
}
Note the $ in the second selector; It indicates which element the CSS block applies to. Unfortunately, there's not even a single implementation of this yet, so you'll have to resort to Javascript (which I assume you know how to do. If not, just ask).
Update (using jQuery):
CSS:
​body {
background: red;
transition: background-color 1s ease;
}
body.hover {
background: green;
}
Javascript:
​$('#theButton').hover(function(){
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});​​​​​​​​
Here's the fiddle: http://jsfiddle.net/mWY88/1/
For maximum efficiency, you should cache your selectors.
In fact, you can change the body background-color very easily with CSS3 transition animation like I'm doing it here. I got the logic from here.

Resources