How can I show hidden element when it has focus?

Question

<div class="row">
    <span class="show-on-hover"><button>Remove</button></span>
    <span class="hide-on-hover">1.00</span>
    <span class="show-on-hover"><input value="1.00"></span>
</div>

I want a CSS solution to show the input when the div is hovered over OR when the input has focus. I've figured out the hover:

div.row .show-on-hover{ display:none; }
div.row:hover .hide-on-hover{ display:none; }
div.row:hover .show-on-hover{ display:inline; }

But how do I keep the above rules if the input has focus as well (including the remove span as well)?

There is also a [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) pseudo class. — ajp15243, Feb 26 '14 at 20:53
Are you asking: if you hover the row which exposes the input, then focus the input, then mouse away, you want the input to still be visible? — skyline3000, Feb 26 '14 at 20:59
@ajp15243 Did you try your suggestion before pointing out the obvious? No. Regardless of whether you use one or a combination of the display, visibility, or opacity properties, the :focus pseudo-class will have no effect on elements that are initially hidden. — Michel Joanisse, Oct 24 '16 at 16:56

score 1 · Answer 1 · answered Feb 26 '14 at 21:50

1

Now i've played around with your problem and it seems like there is no solution to your specific issue without using some kind of script to control the show/noshow.

Here's what I got:

CSS

div:hover input {display:inline;}
input:focus {display:inline;}
input {display:none;}

HTML

<div> 
    <!-- <input id="same" type="button" value="Remove" /> -->
    <span class="hide-on-hover">1.00</span>
    <input id="same" value="1.00">
</div>

Result: http://jsfiddle.net/2thMQ/2/

answered Feb 26 '14 at 21:50

Anonymous

1,303
4
19
31

As you might see, i've outcommented the Remove button but you can just remove the tags if needed – Anonymous Feb 26 '14 at 21:51
Yeah - I got stuck around there too. I had to go to a script, but this is by far the closest. – Bradley Feb 27 '14 at 03:58

score 1 · Accepted Answer · answered Feb 10 '20 at 11:31

Use the focus-within selector of the div element. The focus within applies style to the div/row if any element inside the div/row is focused.

div.row .show-on-hover {
  display: none;
}
div.row:hover .hide-on-hover,
div.row:focus-within .hide-on-hover {
  display: none;
}
div.row:hover .show-on-hover,
div.row:focus-within .show-on-hover {
  display: inline;
}

score 0 · Answer 3 · answered Feb 26 '14 at 20:55

0

i think you are looking for something like this:

div.row .show-on-hover{ display:none; }
div.row:active .hide-on-hover{ display:none; }
div.row:active .show-on-hover{ display:inline; }

answered Feb 26 '14 at 20:55

samuel.molinski

1,119
10
24

No, active didn't do it. It only worked when you were actively clicking on it. – Bradley Feb 26 '14 at 20:59
is there any reason you can't use visibility:hidden instead? because display:none is not available you may want to play with this. – samuel.molinski Feb 27 '14 at 13:58

How can I show hidden element when it has focus?

3 Answers3