Проблема с focus. Скрытые элементы

#title #tech:focus ~ #techText, 
#title #diagramm:focus ~ #diagrammText, 
#title #circle:focus ~ #circleText, 
#title #loope:focus ~ #loopeText{ 
	display: block !important; 
} 
.serviceContent{	 
	width: 60%; 
	height: 50%; 
	display: none; 
	float: right;	 
	position: absolute; 
	bottom: 0; 
    left: 30%; 
    right: 20px; 
    top: 0;     
}

                                       
<div id="title"> 
   <div class="miniMenu"> 
  <div tabindex="0" class="icons" id="diagramm"> 
     <img src="img\service\diagramm.png" alt="diagramm"> 
  </div> 
  <div tabindex="0" class="icons" id="tech"> 
     <img src="img\service\tech.png" alt="tech"> 
  </div> 
  <div tabindex="0" class="icons" id="loope"> 
     <img src="img\service\loope.png" alt="loope"> 
  </div> 
  <div tabindex="0" class="icons" id="circle"> 
     <img src="img\service\diagramm.png" alt="circle"> 
  </div> 
  <div class="serviceContent" id="diagrammText"> 
     <p class="text" id="head">1Modern App Design</p> 
     <img id="orangeUndrLine" src="img\service\line.png" alt="orange_undr_line"> 
     <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> 
     <div id="win" style="display:none;"> 
        <div class="overlay"></div> 
        <div class="visible"> 
           <h2>Заголовок окна</h2> 
           <div class="content"> 
              <p>Содержание</p> 
              <p>Модальное окно фиксированной ширины</p> 
           </div> 
           <button type="button" onClick="getElementById('win').style.display='none';">закрыть</button> 
        </div> 
     </div> 
     <button id="knowMoreBtn" type="button" onClick="getElementById('win').removeAttribute('style');">Know more</button> 
  </div> 
  <div class="serviceContent" id="techText"> 
     <p class="text" id="head">2Modern App Design</p> 
     <img id="orangeUndrLine" src="img\service\line.png" alt="orange_undr_line"> 
     <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> 
     <button id="knowMoreBtn">Know more</button> 
  </div> 
  <div class="serviceContent" id="loopeText"> 
     <p class="text" id="head">3Modern App Design</p> 
     <img id="orangeUndrLine" src="img\service\line.png" alt="orange_undr_line"> 
     <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> 
     <button id="knowMoreBtn">Know more</button> 
  </div> 
  <div class="serviceContent" id="circleText"> 
     <p class="text" id="head">4Modern App Design</p> 
     <img id="orangeUndrLine" src="img\service\line.png" alt="orange_undr_line"> 
     <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> 
     <button id="knowMoreBtn">Know more</button> 
  </div> 
   </div> 
   <div class="serviceImage"> 
  <img src="img\apple-watch-mockup.png" alt=""> 
   </div> 
</div>