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>

我想要一个CSS解决方案，当div悬停在OR或输入有焦点时显示输入。我已经想出了悬停：

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

但是如果输入也有焦点，我如何保持上述规则（包括删除范围）？

Answer 1

现在我已经解决了你的问题，似乎没有使用某种脚本来控制show / 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/

Answer 2

我认为你正在寻找这样的事情：

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

Answer 3

使用div元素的焦点内选择器。如果div / row中的任何元素都被聚焦，则内部焦点将样式应用于div / row。

import cx_Oracle
import pandas as pd

#creating database connection
dsn_tns = cx_Oracle.makedsn('dev-tr01.com', '1222', service_name='ast041.com')
conn = cx_Oracle.connect(user=r'usr', password='3451', dsn=dsn_tns)
c = conn.cursor()

query ='SELECT * FROM Employee WHERE ROWNUM <10'
result = pd.read_sql(query, con=conn)
result.to_excel("batchtable.xlsx")

conn.close()

如何在焦点处显示隐藏元素？

3 个答案: