CODEWITHSUNDEEP
css
Bradley
Bradley

Reputation: 2141

How can I show hidden element when it has focus?

<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)?

Upvotes: 2

Views: 8903

Answers (3)

swift-lynx
swift-lynx

Reputation: 3765

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;
}

Upvotes: 2

Anonymous
Anonymous

Reputation: 1373

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/

Upvotes: 1

samuel.molinski
samuel.molinski

Reputation: 1129

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; }

Upvotes: 0

Related Questions