CSS masters please...
- Started
- Last post
- 27 Responses
- _niko9
- Ah yes, I think this sums it up perfectly!dee-dubs
- every timesection_014
- 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
- 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
- sausages0
^ < If you run into any more issues, here is a list of the pseudo classes: http://www.w3schools.com/css/css…
- 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
- 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.