CSS: сосредоточиться на элементе для отображения другого ранее скрытого элемента

Question

Я пытаюсь сделать эту работу чистым CSS, я знаю, как это сделать в JQuery, но я действительно хочу (если возможно) сделать это в CSS.

У меня есть пролеты с классами, идущих от «mens1» до 9.

И я дивы, идущих от «mention1» до 9. Всех дивы не должны быть видны на первом.

Когда я нажимаю соответствующий интервал, я хочу, чтобы фокус показывал соответствующий div (то есть, щелкнув мышью на mens1, следует отобразить упоминание1) и скрыть все остальные.

Я попытался следующие без успеха:

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

Я также пытался просто дать один класс там, не меняет

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

Вы не можете добраться до элемента .mentsions, не помещая их внутри одного элемента .mens, используя псевдо классы. Пожалуйста, отобразите свой HTML, чтобы уточнить.

Answer 4

Вот что-то проще. Вы можете нацелить начало или часть имени класса, а не бесконечно применять перестановки.

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