CSS : 聚焦一个元素以显示另一个先前隐藏的元素 [英] CSS : focus on an element to display another previously hidden element

问题描述

我正在尝试在纯 CSS 上进行这项工作，我知道如何在 Jquery 中进行，但我真的很想(如果可能)在 CSS 中进行此操作.

我的班级跨度从mens1"到 9.

而且我有从mention1"到 9 的 div.所有 div 一开始都不应该可见.

当我点击匹配的span时，我想让焦点显示对应的div(即点击 mens1 应显示mention1)并隐藏所有其他人.

我尝试了以下方法但没有成功:

.mention1{显示:无；}.mens1:focus ~ .mention1{显示:块；}.mens1:focus ~ .mention2, .mention3, .mention4, .mention5, .mention6, .mention7, .mention8, .mention9 {显示:无；}

HTML:

<tr><td class="inner"><表类=内容"><tr><td><a href="path/to/website" target="_blank"><img src="path/to/image1.jpg" ></a></td></tr><tr><td class="text"><div class="boltex">1 的标题</div><br/>1 的文本<div class="year">1 年<div class="prices">1</div><br/><span class="mens1">提及</span>
</td></tr>
</td></tr><div class="mention1 secondclass">提及1

我也试过只让一个班级进去，没有变化

解决方案

看这个解决方案)

li {位置:相对；列表样式类型:无；底边距:10px；}.checkbox {位置:绝对；不透明度:0；}.跨度 {宽度:100px；高度:20px；背景:红色；光标:指针；}.div {宽度:100px；高度:40px；背景:蓝色；显示:无；}.checkbox:checked + .div {显示:块；}.span:focus + div {显示:块；}

<li><label class="label"><div class="span"></div><input type="radio" name="1" class="checkbox"/><div class="div"></div><li><label class="label"><div class="span"></div><input type="radio" name="1" class="checkbox"/><div class="div"></div><li><label class="label"><div class="span"></div><input type="radio" name="1" class="checkbox"/><div class="div"></div><li><label class="label"><div class="span"></div><input type="radio" name="1" class="checkbox"/><div class="div"></div><li><label class="label"><div class="span"></div><input type="radio" name="1" class="checkbox"/><div class="div"></div><li><label class="label"><div class="span"></div><input type="radio" name="1" class="checkbox"/><div class="div"></div>

li {位置:相对；列表样式类型:无；底边距:10px；}.checkbox {位置:绝对；不透明度:0；}.跨度 {宽度:100px；高度:20px；背景:红色；光标:指针；}.div {宽度:100px；高度:40px；背景:蓝色；显示:无；}.checkbox:checked + .div {显示:块；}.span:focus + div {显示:块；}

I am trying to make this work on pure CSS, I know how to do it in Jquery, but I really want(if possible) to do this in CSS.

I have spans with classes going from "mens1" to 9.

And I have divs going from "mention1" to 9. All divs should not be visible at first.

When I click the matching span, I want the focus to show the corresponding div (i.e clicking on mens1 should display mention1) and hide all the others.

I have tried the following without success :

.mention1{
display: none;
}

.mens1:focus ~ .mention1{
display: block;
}

.mens1:focus ~ .mention2, .mention3, .mention4, .mention5, .mention6, .mention7, .mention8, .mention9 {
display:none;
}

HTML :

<table class="column">
                        <tr>
                            <td class="inner">
                                <table class="contents">
                                    <tr>
                                        <td>
                                            <a href="path/to/website" target="_blank">
    <img src="path/to/image1.jpg" ></a>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text">
                                                <div class="boltex">Title of 1
    </div><br/>text of 1
    <div class="year">year of 1<div class="prices">pricing of 1</div><br/><span class="mens1">mentions</span></div>     </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>



 <div class="mention1 secondclass"> mention of 1</div>

I also tried just letting one class in there, no changes

解决方案

Look this solution)

li {
  position: relative;
  list-style-type: none;
  margin-bottom: 10px;
}
.checkbox {
  position: absolute;
  opacity: 0;
}
.span {
  width: 100px;
  height: 20px;
  background: red;
  cursor: pointer;
}

.div {
  width: 100px;
  height: 40px;
  background: blue;
  display: none;
}

.checkbox:checked + .div {
  display: block;
}

.span:focus + div {
  display: block;
}

<ul>
<li>
<label class="label">
  <div class="span"></div>
  <input type="radio" name="1" class="checkbox" />
  <div class="div"></div>
 </label>
</li>
<li>
<label class="label">
  <div class="span"></div>
  <input type="radio" name="1" class="checkbox" />
  <div class="div"></div>
 </label>
</li>
<li>
<label class="label">
  <div class="span"></div>
  <input type="radio" name="1" class="checkbox" />
  <div class="div"></div>
 </label>
</li>
<li>
<label class="label">
  <div class="span"></div>
  <input type="radio" name="1" class="checkbox" />
  <div class="div"></div>
 </label>
</li>
<li>
<label class="label">
  <div class="span"></div>
  <input type="radio" name="1" class="checkbox" />
  <div class="div"></div>
 </label>
</li>
<li>
<label class="label">
  <div class="span"></div>
  <input type="radio" name="1" class="checkbox" />
  <div class="div"></div>
 </label>
</li>
</ul>

li {
  position: relative;
  list-style-type: none;
  margin-bottom: 10px;
}
.checkbox {
  position: absolute;
  opacity: 0;
}
.span {
  width: 100px;
  height: 20px;
  background: red;
  cursor: pointer;
}

.div {
  width: 100px;
  height: 40px;
  background: blue;
  display: none;
}

.checkbox:checked + .div {
  display: block;
}

.span:focus + div {
  display: block;
}

这篇关于CSS : 聚焦一个元素以显示另一个先前隐藏的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！