0

In the link above, how can I make that when I click on "Register" it will hide the welcome class and show the register class ... If I substitute focus for hover it works but it's obvious that I need a clickable option and not on mouse over...

*:hover ~ .register_box {
  display: flex;
}

*:hover ~ .welcome_box {
  display: none;
}

And I am wondering how to do this in CSS not JavaScript.

And I am using all elements selection (the "*") for testing purpose.

https://jsfiddle.net/sufwaqaa/

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
user3801128
  • 35
  • 6
  • Check this question and its answers, you may find some solutions for your problem: http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css – Mattia Nocerino Oct 20 '16 at 08:39
  • Like i said, i would like a clickable option in CSS. The active event is not a permanent option cause it will only work while i am clicking on the element. – user3801128 Oct 20 '16 at 08:50
  • 1
    Maybe the checkbox option (that is explained in the link that Mattia gave the 88 answer) is a way of doing it. But why does the focus does not work ? isn't the focus for this type of things ? – user3801128 Oct 20 '16 at 08:52
  • 1
    Well, no. _":focus selector is allowed on elements that accept keyboard events or other user inputs."_ You can't just focus a div. To do stuff like this you have to go with javascript or try some workarounds, like the label/radio-button http://www.w3schools.com/cssref/sel_focus.asp – Mattia Nocerino Oct 20 '16 at 09:58
  • Check also this tutorial, it explain really well the potential of the label/radiobutton tecnique: https://css-tricks.com/functional-css-tabs-revisited/ – Mattia Nocerino Oct 20 '16 at 10:00
  • `~` represents sibling element. The `.register_box` and `.welcome_box` are not siblings to the register or welcome elements. – Mr_Green Oct 20 '16 at 12:02
  • With checkbox it oes not work has well... maybe it's cause the same sibling thing has with focus... with hover it works... guess that it's only possible with js – user3801128 Oct 20 '16 at 13:08

0 Answers0