CSS masters please...
- Started
- Last post
- 27 Responses
- dee-dubs0
Thanks for the suggestions guys
I thought 'focus' was different from being clicked ('active'). ie. bringing a button/link into focus is not the same as actually clicking it (although both would bring it into focus) - like tabbing to select link would bring it into 'focus' before clicking which would make it 'active'...
maybe i do need to add some JS to just reset it all on click.
- you are correct - e.g. a form element is in focus when being used after tabbing.fadein11
- they are different, but clicking with a mouse they become basically the same. For other input methods, they're not.ESKEMA
- With JS, you could just delay the link action, let it come back to normal state and then open the link.. something like this:
http://stackoverflow…ESKEMA - you only need like .2s delay or whatever it takes to gret back to normal stateESKEMA
- On click Im happy for it to snap back.. but roll off I prefer animation back as looks smootherdee-dubs
- _niko9
- Ah yes, I think this sums it up perfectly!dee-dubs
- every timesection_014
- ETM0
I think you'll require a little jquery or JS to add/remove a class, rather than all via pseudos. You can still use pure CSS for the actual transition itself.
- ESKEMA0
I dont think you can achieve what you want with css only without compromising the rollover / rollout animation.
example:
https://codepen.io/anon/pen/NRNv…having the transitions / animations whatever only on the hover state, you get the normal link coming back to the page, BUT, you also don't have rollout.
P.S. I modified the code to only use one ::before
- sausages0
^ < If you run into any more issues, here is a list of the pseudo classes: http://www.w3schools.com/css/css…
- sted0
add .workLink:focus
sanme as .workLink or whatever you want to do with it- same :psted
- But isn't focus is the issue to start with. That is why it's stuck on click. It should be pure hover event, should it not?ETM
- yes it isn't but the solution for the problem.
simply check out adding the .workLink css you'll see.sted - I did... and it doesn't work. When I click back to the test page the OP's problem still exists.ETM
- add the focus after all elements. and it works.sted
- dee-dubs
Can anyone explain to me what I need to add or remove my css:
https://codepen.io/anon/pen/rrZw…
works fine on rollovers/rollouts using CSS transitions and delays..However when you click on it, the rollover state is preserved and then when you come back to the page it is stuck in hover state and does ugly transition back when you focus (not respecting delays etc)
can I make it just flip to non-rolled over state on click (In CSS only)???