如何在隱藏元素具有焦點時顯示它？

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

我想要一個CSS解決方案來顯示當div懸停在輸入焦點時的輸入。我已經想通了懸停：如何在隱藏元素具有焦點時顯示它？

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

但是我怎麼保持上述規則，如果輸入具有焦點以及（包括刪除跨度爲好）？

來源

2014-02-26 Bradley

還有一個['：focus'（HTTPS：/ /developer.mozilla.org/en-US/docs/Web/CSS/:focus）僞類。 – ajp15243

你問：如果你懸停顯示輸入的行，然後集中輸入，然後鼠標移開，你想輸入仍然可見？ – skyline3000

@ skyline3000：確切的說，是的。 – Bradley

現在我已經用你的問題玩耍了，它好像沒有解決您的具體問題，而無需使用某種腳本來控制表演/ noshow。

這裏就是我的了：

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>

結果： http://jsfiddle.net/2thMQ/2/

來源

2014-02-26 21:50:54 Anonymous

正如你可能看到的，我已經評論了刪除按鈕，但你可以根據需要刪除標籤 – Anonymous

是的 - 我也被卡在那裏。我不得不去劇本，但這是迄今爲止最接近的。 – Bradley

我認爲你正在尋找的東西是這樣的：

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

來源

2014-02-26 20:55:14

不，活躍的沒有這樣做。它只有在你主動點擊它時纔有用。 – Bradley

是否有任何原因，你不能使用可見性：隱藏呢？因爲顯示：沒有不可用，你可能想玩這個。 –

如何在隱藏元素具有焦點時顯示它？

回答

相關問題