我希望在5到6种货币之间循环，只希望能够在任何给定时间显示一种货币。我不能使用输入标签（no：checked pseudoclass）和：target由于平台限制（我在富文本小部件中工作，无法导航到片段标识符）。
支持的HTML标记：
“BR” “格” “跨度” “一世” “B” “强大” “S” “罢工” “U” “EM” “块引用” “TT” “SUP” “子” “小” “标记” “德尔” “插件” “UL” “OL” “礼” “DL” “DT” “DD” “H1” “H2” “H3” “H4” “H5” “H6” “HR” “一”
我正在努力的小提琴：http://jsfiddle.net/nAg7W/803/ 我希望在点击HKD链接然后点击其他地方后，HKD货币仍留在屏幕上。
我尝试使用display：none进行切换; / display：block;属性，但从试验和发现中找到错误+此线程（Transitions on the display: property）它不起作用。使用：焦点，只要我点击页面上的另一个元素，我就会恢复为美元。
div p {
transition: opacity 0s;
display: block;
overflow: hidden;
position: relative
}
div p#usd {
opacity: 1;
height: auto;
}
div p#hkd {
opacity: 0;
height: 0;
}
#hkd-toggle:focus ~ #hkd {
opacity: 1;
height: auto;
position: absolute;
}
#hkd-toggle:focus ~ #usd {
opacity: 0;
height: 0;
position: absolute
}<div>
<ul style="list-style-type: none;">
<li>
<a href="#" id="usd-toggle">USD</a>
<a href="#" id="hkd-toggle">HKD</a>
<p id="usd">suhh</p>
<p id="hkd">duuude</p>
</li>
</ul>
</div>
关于如何用纯CSS实现这一点的任何想法？我希望可以延迟坚持焦点状态，但这似乎是一个死路一条。非常感谢任何帮助。
谢谢！
答案 0 :(得分：1)
在 Snippet 2 中，我们将在＆＃34; off＆＃34;上使用令人难以置信的延长时间延迟。目标元素的状态。基本上它的作用是像往常一样强制状态，而不是毫秒或秒，我们将延迟设置为大约1000万秒，这将是大约120天。因此，在这120天的延迟中，目标元素仍将位于＆＃34; on＆＃34;州。我试图创建一组新的按钮来重置目标，但是我已经没时间了，也许有了这个开头你可以想象重置功能。</ p>
在 Snippet 1 中，只有一个可见的伪选择器可供使用，因为:target和:clicked等不是一个选项。对于额外内容，您可以使用:before和.after。
body {
background: black;
color: white;
font: 600 20px/1.5 Times;
}
a,
a:link,
a:visited {
text-decoration: none;
display: inline-block;
color: white;
}
a:hover {
color: yellow;
}
/*
| -Make your hidden state for target
| -Add a very long delay time on the
| transition property. As long as the
| transition is moving towards it's goal
| to complete the animation in 120 days,
| the "on" state stays active.
*/
b {
display: block;
opacity: 0;
font-size: 20px;
transition: all 0s 10368000s;
}
/*
| -These rulesets override the long duration
| time.
*/
.u:active + b.usd,
.g:active + a.u + b.usd,
.y:active + b.yen,
.r:active + a.y + b.yen,
.e:active + b.eur,
.b:active + a.e + b.eur {
transition: all 0s;
}
.g:active + a.u + b.usd {
opacity: 1;
color: lime;
}
.u:active + b.usd.usd {
opacity: 0;
}
.r:active + a.y + b.yen {
opacity: 1;
color: tomato;
}
.y:active + b.yen.yen {
opacity: 0;
}
.b:active + a.e + b.eur {
opacity: 1;
color: cyan;
}
.e:active + b.eur.eur {
opacity: 0;
}<dl>
<dt>Currency Exchange</dt>
<dd>
<a href='#/' class="g">USD</a>
<a href="#/" class='u'></a>
<b class="usd">$1.00</b>
</dd>
<dd>
<a href='#/' class="r">YEN</a>
<a href='#/' class="y"></a>
<b class='yen'>¥1.00</b>
</dd>
<dd>
<a href='#/' class="b">EUR</a>
<a href='#/' class="e"></a>
<b class='eur'>€1.00</b>
</dd>
</dl>
body {
background: #333;
}
dt {
margin: 0 0 10px 0;
color: gold;
}
a,
a:link,
a:visited {
background: black;
color: yellow;
display: block;
}
a:hover,
a:active {
background: yellow;
color: black;
}
b#usd,
b#hkd,
b#eur,
b#yen,
b#pso,
b#drc {
opacity: 0;
height: 0;
width: 0;
transition: all 1s linear;
}
#usd1:focus + b,
#hkd2:focus + b,
#eur3:focus + b,
#yen4:focus + b,
#pso5:focus + b,
#drc6:focus + b {
opacity: 1;
height: 20px;
width: 20px;
color: cyan;
transition: all 1s linear;
}
#usd:hover:after,
#hkd:hover:after,
#eur:hover:after,
#yen:hover:after,
#pso:hover:after,
#drc:hover:after {
content: '';
}<dl>
<dt>Currency Display</dt>
<dd>
<a href="#/" id="usd1">USD</a>
<b id="usd">USD</b>
<a href="#/" id="hkd2">HKD</a>
<b id="hkd">HKD</b>
<a href="#/" id="eur3">EUR</a>
<b id="eur">EUR</b>
<a href="#/" id="yen4">YEN</a>
<b id="yen">YEN</b>
<a href="#/" id="pso5">PSO</a>
<b id="pso">PSO</b>
<a href="#/" id="drc6">DRC</a>
<b id="drc">DRC</b>
</dd>
</dl>