CSS：前に隠された別の要素を表示する要素に焦点を合わせる

Question

純粋なCSSでこの作業をしようとしていますが、Jqueryで行う方法はわかっていますが、CSSでこれを行うことが本当に必要です。

は私が9

に「mens1」から行くのクラスとのスパンを持っていると私はすべてのdiv要素は、最初は見えてはいけません9. に「mention1」から行くdivを持っています。

マッチするスパンをクリックすると、フォーカスに対応するdiv が表示されるようにします（つまり、mens1をクリックすると、mention1が表示されます）。

私は成功せず、次のことを試してみました：

.mention1{ 
display: none; 
} 

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

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

HTML：私もそこに1つのクラスをさせることを試みた

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

、何も変更

Answer 1

このソリューションを見て）

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

Answer 2

あなたはスタイルを変更しようとすることはできませんJavaScriptを使って

function changeElement(id) { 
    var el = document.getElementById(id); 
    el.style.display = "block"; 
} 

Answer 3

擬似クラスを使用して単一の.mens要素内に配置することなく、.mentions要素に到達することはできません。 明確にするためにHTMLを表示してください。

Answer 4

これは簡単です。パーミュテーションを無限に適用するのではなく、クラス名の先頭または一部を対象にすることができます。

.mens1:focus ~ div[class^='mention']{ 
    display:none; 
}