3

&:hover を SCSS コードの目的の場所に追加するのに問題があります。

基本的に、私は各 LI のクラスを持つ非常に単純なメニューを持っています。基本的に、私が書いた次のコードは、各クラスに必要なスタイルを正しく割り当てますが、これは単なるホバーイベントにしたいだけです。

ここにコードがあります

$menu-style: black #000, blue #6699ff;

.top-bar-section {
    @each $menu-color in $menu-style {
        ul li .#{nth($menu-color, 1)} {
            border-top:5px solid nth($menu-color, 2);
        }
    }
}

CSSに処理されたときに生成されるものは次のとおりです

.top-bar-section ul li .black {
  border-top: 5px solid black;
}

.top-bar-section ul li .blue {
  border-top: 5px solid #6699ff;
}

ここに私が達成する必要がある私の望ましい結果があります

.top-bar-section ul li.black:hover, .top-bar-section ul li.black.active {
  border-top: 5px solid #333;
}

etc....

問題を正しく参照してください。=[ . &:hover を追加すると、複合セレクターの開始時に指定する必要があると叫びます...

何か案は？

4

1 に答える 1

3

をどこに追加しようとしていたのかはわかりませんが、うまく:hoverいくようです。

$menu-style: black #000, blue #6699ff;

.top-bar-section {
    @each $menu-color in $menu-style {
        ul li.#{nth($menu-color, 1)}:hover {
            border-top:5px solid nth($menu-color, 2);
        }
    }
}

出力：

.top-bar-section ul li.black:hover {
  border-top: 5px solid black;
}

.top-bar-section ul li.blue:hover {
  border-top: 5px solid #6699ff;
}
于 2013-04-20T11:55:41.123 に答える