Наведите указатель мыши на родительский элемент с помощью css

Question

Мне было интересно, можно ли применить эффект наведения на родительский элемент с помощью только css. Например, у меня есть навигация:

<nav> 
<ul> 
    <a href="#"><li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li></a> 
     <ul id="audio_sub_menu"> 
      <li class="mes">mēs 1</li> 
      <li id="klienti">mēs 2</li> 
     </ul> 
    <a href="#"><li class="main-nav" id="audio">paklausies!</li></a> 
    <a href="#"><li class="main-nav" id="video">paskaties!</li></a> 
    <a href="#"><li class="main-nav" id="kontakti">pasūti!</li></a> 
</ul> 
</nav>` 

И что я хочу, чтобы, когда парил на nav ul ul li элемент, он влияет на #firstLiElement . Я знаю, что это можно сделать с помощью JS, но также должен быть способ сделать это с помощью css. Я нашел много решений, когда вам нужно повлиять на брата или ребенка, но ничего не нашел для этой ситуации.

EDIT:

К сожалению, даже не писать то, что я искал ... Да, sub_menus скрыты, но когда я парить основной навигации Li элемент, они засунуть, и они остаются видимый также, когда я на них курю. То, что мне не хватает, это изменить цвет фона элемента основной навигации li, когда подменю завис.

Answer 1

Я нашел это для вас.

a < img { border: none; } 

В этом примере он будет выбирать теги, но только если они содержат тег img. (Кроме того: это было бы странным отходом от типичного синтаксиса, когда фактические элементы, выбранные справа, это было бы слева).

a img:parent { background: none; } 

Ключевое отличие, что: родительский синтаксис будет оценивать только один элемент, ParentNode доступной в DOM для каждого элемента. Это будет похоже на принуждение: имеет селектор для оценки только детей, а не всех потомков.

https://css-tricks.com/parent-selectors-in-css/

Answer 2

Я считаю, что это не может быть сделано. CSS или Cascade Style Sheet - ключевое слово здесь Cascade - выполняется в каскадном направлении, а не наоборот.

Вы можете сделать это (при условии, audio_sub_menu, т.е. скрыт):

nav ul a:hover ul { 
    visibility: visible; 
} 

И вы будете ориентации ребенка на его родительский парении. Таким образом, вы можете изменить расположение и дизайн, чтобы использовать эти знания, или пойти с решением JS :)

редактировать

, чтобы получить тот же цвет, стиль :hover на родителях, а также и изменения первый </a> в вашем HTML код

<nav> 
    <ul> 
     <a href="#"><li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li> 
      <ul id="audio_sub_menu"> 
       <li class="mes">mēs 1</li> 
       <li id="klienti">mēs 2</li> 
      </ul> 
     </a> 
     <a href="#"><li class="main-nav" id="audio">paklausies!</li></a> 
     <a href="#"><li class="main-nav" id="video">paskaties!</li></a> 
     <a href="#"><li class="main-nav" id="kontakti">pasūti!</li></a> 
    </ul> 
</nav> 

И КСС

nav ul a:hover { 
    background-color: your_color; 
} 

nav ul a:hover ul { 
    visibility: visible; 
    background-color: your_color; 
} 

редактировать - На ответе hetasbo в

те предложены CSS селекторы, они не существуют