基于单选按钮选择使用 CSS 显示/隐藏链接

Posted 2023-03-06

【中文标题】基于单选按钮选择使用 CSS 显示/隐藏链接

【英文标题】：Show/hide links with CSS based on radiobutton selection

【发布时间】：2016-09-20 09:10:39

【问题描述】：

我正在尝试根据当前选中的单选按钮显示/隐藏超链接。这一直有效，直到我将单选按钮包装在 <ul><li> 元素中。

CSS

.site 
  opacity: 0;
  height: 0px;
  -moz-transition: opacity .5s ease-in-out, height .5s ease-in-out,background  .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out, height .5s ease-in-out,background  .5s ease-in-out;
  transition: opacity .5s ease-in-out, height .5s ease-in-out,background  .5s ease-in-out;

input[id=rbSites]:checked ~.site 
  opacity: 1;
  height: 15px;

HTML

<input type="radio" id="rbSites" name="types"> 
<label for="supportCase">Sites</label>
<input type="radio" id="rbOther" name="types"> 
<label for="other">Other</label>
<div class="cell site">Link to</div>
<a class="site">SiteX</a>
<a class="site">SiteY</a>
<a class="moblie">AppX</a>

一旦单选按钮被包裹在 <ul><li> 元素中，上述内容就会停止工作，如下所示：

<ul>
  <li>
    <input type="radio" id="rbSites" name="types"> 
    <label for="supportCase">Sites</label>
    <input type="radio" id="rbOther" name="types"> 
    <label for="other">Other</label>
  </li>
<ul>

参见jsFiddle without <ul><li> 和with <ul><li>。

【问题讨论】：

Is there a CSS parent selector?的可能重复

【参考方案1】：

问题是.site 不再是兄弟，所以一旦单选按钮被包裹在<ul><li> 中，~.site 选择器就不起作用了。

您将需要一个额外的父选择器（选择<ul>，然后选择~.site）或选择具有特定子元素（选中的单选按钮）的元素（<ul>）的方法。

很遗憾，恐怕这两个选项都只能在 CSS4 中使用。另请参阅this 和this 的答案。