トグルクラス：クラス

後にトリガされたとき、擬似:afterクラスはボタントグルクラス：クラス

.primary .search:after, 
.primary .search[data-search="disabled"]:after { 
    color: #fff; 
    content: "\E8B6"; 
    font-family: "Material Icons"; 
    position: absolute; 
    top: -25px; 
    transition: color .3s; 
    font-size: 26px; 
    margin-left: -10px; 
} 

//THIS NEEDS TO BE APPLIED TO THE :after PSEUDO CLASS TO SET THE BACKGROUND COLOR OF THE BUTTON 
.search-active { 
    background-color: purple; 
    padding: 12px 33px 19px 35px; 
    margin: 0px -30px; 
}

の背景色を設定し、切り替えクラスsearch-activeを持っている必要があるとボタン

<button href="#" class="search no-style search-active" style="display: inline-block;"> 
<div class="pointer" style="display:none">::after</div> 
</button>

考えます私は別のボタンのために働いて同様のjqueryのを持っているが、これは、この特定のインスタンスのために動作していないようです：

$(".search").on("click", function() { 
    $(this).toggleClass('search-active'); 
});

JSFIDDLE：https://jsfiddle.net/xk9hx9j9/2/

出典

2016-05-16 user3438917

私はあなただけで置き換えるべきだと思いますあなたのスタイルシートで '.search-active'を' .primary .search.search-active：after'と置き換えてください。 https://jsfiddle.net/xk9hx9j9/4/ – Blazemonger

@Blazemonger - '：after'クラスにはアイコンが表示されているもので、その後、私は私が作成したアクティブなクラスを使用して、クリックで背景色を適用する必要があります。私が達成しようとしているものではないので、デフォルトで背景色をオンにすることはできません。あなたは、これは有益かもしれ – user3438917

：http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin – SimianAngel

それあなたのコメントは、「これはに適用する必要が//：擬似クラスの後にボタンの背景色を設定するには、」この行を削除しています

出典

2016-05-16 21:50:44

コメントは影響しません。コード。私は何が起こる必要があるかを説明するためにコメントを入れた。 – user3438917

/*これは、あなたが、私はCSSでコメントする方法を知っているコメントと –

もう一度やり直してください* /削除するには、CSSにコメントする方法ですが、私はコメントとして '//'使用する、一日中JSに取り組んできました。しかし、このCSSのレンダリングには影響しません。 – user3438917

答えて

関連する問題