Geek asks and answers

Why does changing visibility / display in focus not work?

I had an idea to do a search for "button" by clicking, which will be displayed and stretched. However, instead of using an invisible flag, I decided to try and use a label, since clicking on the label will focus on the element to which the label is attached. And although you do focus and do basic transformations, work, I can’t hide / show the text box with visibility: hidden/visibleor display: none/inline-block. And I don't want to just rely on opacity, as the text box can be found / clicked even if it is hidden.

Current try: JsFiddle

Why is this not working? What am I doing wrong?

+3
source share
4 answers

Elements that are not visible cannot receive focus, so the :focuspsuedo class cannot be used.

Using widthand opacity, apparently, gives a reasonable effect.

+4
source

You cannot get focus from a shortcut because it is not a focusable element. See BoltClocks answer here: Anyway, for the label to respond: focus CSS

+1
source

: http://jsfiddle.net/h6NNs/

: focus : hover.

CSS :

form label {
    font-size: 23px;
}

#box {
    width: 0px;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:hover{
    visibility: visible;
    opacity: 1;    
    width: 50px;
}
+1

, visibility:hidden display:none; (IMHO), .

form label {
    font-size: 23px;
}

#box {
    width: 0px;
  opacity:0;
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:focus {
   opacity:1;
    width: 50px;
}

http://jsfiddle.net/6h8cF/7/

+1
source

More articles:


All Articles