2

私は SCSS に比較的慣れていないので、リンターを使用してスキルを向上させようとしています。親メニュー項目がホバーされている場合にのみサブメニューを表示するこの小さな例があります。このコードが機能している間、リンターは「クラスは親の疑似クラス内にネストする必要があります」と表示します。

.menu-item { 
  .submenu {
    display: none;
  }

  &:hover .submenu {
    display: block;
  }
}
<ul>
  <li class='menu-item'>
    <a href=''>
      Menu 1
    </a>
    <ul class='submenu'>
      <li>Submenu 1.1</li>
      <li>Submenu 1.2</li>
    </ul>
  </li>
</ul>

:hover 部分を .submenu 部分にネストする方法がわかりません。手伝ってくれますか？

4

2 に答える 2

0

SASS コードは、正常に動作する以下の CSS コードにコンパイルされます。SASS コードが適切に CSS にコンパイルされていることを確認してください。

.menu-item .submenu {
  display: none;
}

.menu-item:hover .submenu {
  display: block;
}
<ul>
  <li class='menu-item'>
    <a href=''>
      Menu 1
    </a>
    <ul class='submenu'>
      <li>Submenu 1.1</li>
      <li>Submenu 1.2</li>
    </ul>
  </li>
</ul>

于 2016-12-30T10:34:54.867 に答える