Html 将内容切换链接样式设置为单选按钮

我试图混合两种行为。我可以让他们一次工作一个，但不能同时工作两个。 具体来说，我想要的是通过点击三幅图像中的一幅，在内容之间切换，不点击时图像会褪色，激活时会变得不那么透明。我有一些问题，使不透明的工作，但我可能可以找到我自己的问题

这是我上半场的表现。CSS对于每个div都是重复的，略有变化：请参阅以获取总和

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

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

---

另外，这也使得这项工作变得困难：我想用CSS和HTML来完成这项工作。如果可能的话，不要使用jquery或Javascript。

我认为不能同时使用这两种效果的原因是因为您使用的是

：target

，这意味着当您单击图像/链接时，只有target会“激发”，这意味着您的单选按钮永远不会被选中。这只是我基于查看/尝试您的代码而做出的猜测，我自己对

：target

的试验还不够，无法证实这一点

解决这一问题的最简单方法是移动div，使其位于标签的内部而不是外部，这样可以像定位图像那样定位

div


.timeline{显示：内联块；垂直对齐：顶部；}
.时间轴>输入[类型=收音机]{
显示：无；
}
输入[类型=无线电]+img{
光标：指针；
边框：2倍实心透明；
不透明度：0.2；
过渡：不透明度。5s缓进缓出；
-moz过渡：不透明度。5s缓进缓出；
-webkit过渡：不透明度。5s易入易出；
}
输入[类型=无线电]：选中+img{
不透明度：0.8；
}
input[type=radio]~div{display:none；}
输入[类型=收音机]：选中~div{
显示：块；
}

这是一个
这是两个
这是三个
设置80%不透明度：
不透明度：0.8非常感谢。你知道有一种（css）方法可以在两者之间淡出，这样就不会从.2跳到.8？新小提琴：。好极了，谢谢。你的新小提琴很好用。现在还有什么问题吗？
.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%;
}