ターゲット設定によるドロップダウン機能

Question

私はW3CSchoolsに提示されているドロップダウンボックスをクラス指向のCSSに変換したいと思っています（クラスをたくさん用意するのではなく、主な親から選択するだけです）。

はここにHTMLです：

<nav> 
    <div class="dropdown"> 
     <button class="dropbtn">Dropdown</button> 
     <div class="dropdown-content"> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
     </div> 
    </div> 
</nav> 

（事実、私はここにすべてのクラスを持ってする必要はありません）

はここにCSSです：変換したときに、ここで

/* Style The Dropdown Button */ 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
    display: block; 
} 

/* Change the background color of the dropdown button when the dropdown content is shown */ 
.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 

すべてが正常に動作します機能的なものを除いて、単にnav要素によってターゲット設定されています。

.dropdown:hover .dropdown-content { 
    display: block; 
} 
.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 

私は

nav > div:hover nav > div > div { 
    display: block; 
} 
nav > div:hover mav > div > button { 
    background-color: #3e8e41; 
} 

、にこれらを変換しようとすることができる。しかし何も起こりません。私も.dropdownのプライマリ親クラスを使用して、nav > divの先頭を削除しようとしましたが、何も返しません。

違いは何ですか？私は全く同じ要素を対象にしています。

Answer 1

nav > div:hover mav > div > button {​​の入力ミスは、navである必要があります。そのため、テストで問題が発生した可能性があります。ここ

は、クラスを使用せず、関連するコードである：実際には、意図しないミスた

/*selects the nav and then select the div that is the immediate child of the nav that is hovered. When that child div is hovered it selects the first div and sets its display type to block*/ 
nav > div:hover > div:first-of-type{ 
    display: block; 
} 
nav > div:hover > button{ 
    background-color: #3e8e41; 
} 

/* Style The Dropdown Button */ 
 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
/* Links inside the dropdown */ 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
/* Change color of dropdown links on hover */ 
 
.dropdown-content a:hover {background-color: #f1f1f1;} 
 

 

 
nav > div:hover > div:first-of-type{ 
 
    display: block; 
 
} 
 
nav > div:hover > button{ 
 
    background-color: #3e8e41; 
 
}

<nav> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</nav>