скрыть элемент в другом родителе

Question

Как я могу скрывать или показывать элемент, содержащийся в контейнере, на основе состояния зависания другого контейнера?

Вот что я до сих пор, в качестве примера:

HTML5

<div class="left-menu-container"> 
    <div class="left-menu-inner-container"> 
     <div class="left-menu-item-container"> 
      <a href="AppsDashboard" class="left-menu-link"> 
       <div class="left-menu-item-first"> 
        Find an Application 
       </div> 
      </a> 
      <div class="sub-menu"> 
       <input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" /> 
      </div> 
     </div> 
    </div> 
</div> 

CSS3

div.left-menu-container { 
    float: left; 
    width: 19%; 
    padding-right: 1%; 
} 

div.left-menu-inner-container { 
    width: 100%; 
} 
div.left-menu-item-container 
{ 
    width:100%; 
} 

div.left-menu-item-first { 
    width: 93%; 
    border: 1px solid #999; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-right-radius: 10px; 
    transition: 0.15s ease-in-out; 
    color: black; 
    min-height: 26px; 
    padding-left: 1%; 
} 

    div.left-menu-item-first:hover { 
     width: 97%; 
     border: 1px solid #999; 
     color: white; 
     background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159)); 
     padding-left: 3%; 
    } 

div.left-menu-item-container .sub-menu { 
    width: 97%; 
    border: 1px solid #999; 
    color: white; 
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159)); 
    padding-left: 3%; 
    display: none; 

} 

div.left-menu-item-first:hover left-menu-item-container.sub-menu { 
    position:absolute; 
    width: 80%; 
    border: 1px solid #999; 
    color: white; 
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159)); 
    float:left; 
    display: block; 
    z-index: 1000; 
    float: left; 
} 

Однако, это просто не работает. При наведении указателя на left-menu-item-first div не отображается submenu, содержащемся в родительском left-menu-item-container. Действительно ли они и абсолютно должны быть родителями родителей, чтобы это работало с Pure CSS? Я могу и уже имел установку JQuery, но я хотел сделать это с помощью CSS только по возможности.

Answer 1

Вы можете изменить только дочерние элементы и одноуровневые элементы на парении, никогда совершенно другой элемент.

если вы поставите право подменит после первого элемента меню, вы можете использовать селектор родственного + следующим образом:

div.left-menu-container { 
 
    float: left; 
 
    width: 19%; 
 
    padding-right: 1%; 
 
} 
 

 
div.left-menu-inner-container { 
 
    width: 100%; 
 
} 
 
div.left-menu-item-container 
 
{ 
 
    width:100%; 
 
} 
 

 
div.left-menu-item-first { 
 
    width: 93%; 
 
    border: 1px solid #999; 
 
    -webkit-border-top-right-radius: 10px; 
 
    -moz-border-radius-topright: 10px; 
 
    border-top-right-radius: 10px; 
 
    transition: 0.15s ease-in-out; 
 
    color: black; 
 
    min-height: 26px; 
 
    padding-left: 1%; 
 
} 
 

 
    div.left-menu-item-first:hover { 
 
     width: 97%; 
 
     border: 1px solid #999; 
 
     color: white; 
 
     background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159)); 
 
     padding-left: 3%; 
 
    } 
 

 
div.left-menu-item-container .sub-menu { 
 
    width: 97%; 
 
    border: 1px solid #999; 
 
    color: white; 
 
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159)); 
 
    padding-left: 3%; 
 
    display: none; 
 

 
} 
 

 
.left-menu-link:hover + .sub-menu { 
 
    position:absolute; 
 
    width: 80%; 
 
    border: 1px solid #999; 
 
    color: white; 
 
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159)); 
 
    float:left; 
 
    display: block; 
 
    z-index: 1000; 
 
    float: left; 
 
}

<div class="left-menu-container"> 
 
    <div class="left-menu-inner-container"> 
 
     <div class="left-menu-item-container"> 
 
      <span class="AppsDashboard"> 
 
      <a href="AppsDashboard1" class="left-menu-link"> 
 
       <div class="left-menu-item-first"> 
 
        Find an Application 
 
       </div> 
 
      </a> 
 
      <div class="sub-menu"> 
 
       <input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" /> 
 
      </div> 
 
      </span> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Поскольку нет CSS родительского селектора, попробуйте изменить HTML таким образом, что парил элемент является родственным левым меню пункта-container.sub меню Попробуйте использовать CSS sibling selector:

Изменить:

div.left-menu-item-first:hover left-menu-item-container.sub-menu 

в

div.left-menu-item-first:hover + left-menu-item-container.sub-menu 

Или

Изменено:

div.left-menu-item-first:hover left-menu-item-container.sub-menu 

в

.left-menu-link:hover + left-menu-item-container.sub-menu