:afterと:afterを組み合わせる


176

私は、結合したい:after:hoverCSS(または任意の他の疑似セレクタ)で。基本的にはリストがあり、selectedクラスを持つアイテムにはを使用して適用される矢印の形があり:afterます。ホバーされているオブジェクトでも同じようにしたいのですが、うまく動かせません。コードはこちら

#alertlist
{
    list-style:none;
    width: 250px;
}
#alertlist li
{
    padding: 5px 10px;
    border-bottom: 1px solid #e9e9e9;
    position:relative;
}
#alertlist li.selected, #alertlist li:hover
{
    color: #f0f0f0;
    background-color: #303030;
}

#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

<ul id="alertlist">
    <li>Alert 123</li>
    <li class="selected">Alert 123</li>
    <li>Alert 123</li>
</ul>

ルール#alertlist li:hover:afterを追加しようとしましたか?
Andrea

回答:


225

セレクターと同じ方法でセレクターに追加:afterするだけ#alertlist li:hoverです#alertlist li.selected

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

29
@Chris、あなたがおそらく以前に試みたことは:after:hover 、とは対照的:hover:afterでした。これは私が最初にやったことですが、イライラして動作しません
WickyNilliams

3
@WickyNilliams:デザイン(疑似クラス対擬似要素)によってだ-を参照してstackoverflow.com/questions/5777210/...
BoltClock

3
これは、Chrome(v43)やFF(v38)のテキスト装飾では機能しないようです。
ジオイデシック2015年

@geoidesic:テキストの装飾は、まったく別の問題です。特に、絶対配置ではうまく機能しません。疑似要素や:hover疑似クラスとは関係ありません。
BoltClock

@BoltClock絶対配置を使用していませんが、上記のセレクタ構文を使用して:afterコンテンツの色を変更できますが、リンクの:after要素のホバー状態のテキスト装飾を変更できません。それ以外の場合、テキストの装飾はうまく機能します。
ジオイデシック2015年

22

scssで

&::after{
content: url(images/RelativeProjectsArr.png);
margin-left:30px;
}

&:hover{
    background-color:$turkiz;
    color:#e5e7ef;

    &::after{
    content: url(images/RelativeProjectsArrHover.png);
    }
}

7
 #alertlist li:hover:after,#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}​

jsFiddleリンク


li:hover:afteこれを選択したクラスと同じクラスに追加します
Kishore Kumar
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.