Disable/remove css3 transitions after :active psuedo-class - css

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.

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.

Fullcalendar events have desaturated background color

I'm using fullCalendar's resource-timeline views and I have noticed that the event background colors are de-saturated.
I have used different ways to set their color, including setting all event background colors with CSS, and everything works (i.e. I have no problem changing the event colors), except that the colors lack saturation.
For example, using CSS like this:
div#calendar {
background-color: red !important;
}
.fc-timeline-event {
background-color: red !important;
}
I would expect both the table background and the events to be saturated red. The background is, but the events are not. Checking with a color sampler shows that the background is #ff0000, but the cells are #ff5952, which corresponds to red saturated to 68%.
Strangely enough the browser inspector shows the computed background color as #ff0000.
Any ideas on how to achieve a display with fully saturated colors?
I have my solution.
In your CSS style code, you put the code below
.fc-bgevent {
opacity: 1;
}
The number 1 above can be changed to 0.9, 0.8 etc. It will replace the background event style.
And it works for me!
Fullcalendar CSS contains a rule that overlays the calendar with white, opacity 25%. This causes the problem
:
.fc-event .fc-bg {
z-index : 1;
background; #fff;
opacity: 0.25
)
The opacity needs to be set to 0. So Added this in my own stylesheet:
.fc-event .fc-bg {
opacity: 0 !important;
}

Don't apply CSS transition from focus to blur

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}

setting element to opacity: 0 disables it in Firefox

I am trying to mask an upload input element by my usual method of setting its opacity to 0, and then overlaying it with an image (with pointer-events set to none) so that it effectively masks the input with a nicer-looking button, but when you click that area, the submit still fires.
This is all fine and happy except in Firefox, where it seems setting opacity: 0 on an element disables it?
Does anyone know a way around this?
you can use #-moz-document url-prefix() { for excluding firefox css. example like this
#-moz-document url-prefix() {
.content {
opacity: 1 !important;
}
}

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