Question

我正在尝试混合两种行为。我可以让他们一次工作一个，但不能同时工作。我想要的是，具体来说，能够通过点击三个图像中的一个来在内容之间进行转换，这些图像在未被点击时会消失，在激活时会变得不那么透明。我在制作不透明度方面遇到了一些问题，但我可以自己解决这个问题。

这是我上半场所做的。每个div重复使用CSS，略有不同：请参阅the jfiddle总和。

<label class="timeline" for="adult">
<input id="adult" type="radio" name="timeline" value="large" />
<a href=#1><img src=http://www.clker.com/cliparts/P/e/k/7/a/a/carton-open-box-md.png width=200px height=auto></a>
</label>

<div id="1">THIS IS ONE</div>
<div id="2">THIS IS TWO</div>
<div id="3">THIS IS THREE</div>

这是下半场。重复每个div的HTML，略有不同。请参阅the jfiddle了解总和。

<label class="timeline" for="adult">
<input id="adult" type="radio" name="timeline" value="big" />
<img src="http://www.clker.com/cliparts/P/e/k/7/a/a/carton-open-box-md.png" width=200px height=auto>

.timeline > input[type=radio]{
display:none;
}
input[type=radio] + img{
cursor:pointer;
border:2px solid transparent;
opacity:20%;
}
input[type=radio]:checked + img{
border:2px solid #f00;
opacity:80%;
}

此外，这就是困难的原因：我想在CSS和HTML中这样做。如果可能的话，没有jquery或Javascript。

Answer 1

我认为你不能同时做这两种效果的原因是因为你正在使用:target这意味着当你点击图像/链接时，只有目标会“触发”意味着你的单选按钮实际上从未获得检查。这只是基于查看/尝试您的代码的猜测，我自己没有用:target进行足够的实验来证实这一点。

解决这个问题最简单的方法就是将你的divs移动到你的标签内而不是外面，这样你就可以按照你定位图像的方式定位DIVS。

.timeline{display: inline-block; vertical-align: top;}
.timeline > input[type=radio]{
  display:none;
}
input[type=radio] + img{
  cursor:pointer;
  border:2px solid transparent;
    opacity:0.2;
    transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
}
input[type=radio]:checked + img{
    opacity:0.8;
}
input[type=radio] ~ div{display: none;}
input[type=radio]:checked ~ div{
    display:block;
}

<label class="timeline" for="child">
    <input id="child" type="radio" name="timeline" value="small" />
    <img src="http://www.clker.com/cliparts/P/e/k/7/a/a/carton-open-box-md.png" width=200px height=auto />
    <div>THIS IS ONE</div>
  </label>
  
  <label class="timeline" for="teen">
    <input id="teen" type="radio" name="timeline" value="med"/>
      <img src="http://www.clker.com/cliparts/P/e/k/7/a/a/carton-open-box-md.png" width=200px height=auto />
      <div>THIS IS TWO</div>
  </label>
  
  <label class="timeline" for="adult">
    <input id="adult" type="radio" name="timeline" value="big" />
      <img src="http://www.clker.com/cliparts/P/e/k/7/a/a/carton-open-box-md.png" width=200px height=auto />
      <div>THIS IS THREE</div>
  </label>

样式内容切换链接作为单选按钮

1 个答案: