jquery - ロールオーバー時にセレクターの疑似要素の背景色を変更するには?

Question

私の CodePen: http://codepen.io/leongaban/pen/cfLEh

CSS shape の例から作成されたこの「先のとがった記号」ボタンがあります。

基本的にarrow-buttonには背景色があり、arrow-button:beforeはボックスの右側にある三角形の背景を作成します。

ホバーまたはマウス入力で、図形全体の背景色を青からオレンジに変更したいと思います。

これをどのように行うつもりですか？

CSS

#arrow-button {
   width: 120px; 
   height: 57px; 
   background: blue;
   position: relative;
   left: 200px;
   cursor: pointer;
}
#arrow-button:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 28.5px solid transparent;
   border-left: 10px solid blue;
   border-bottom: 28.5px solid transparent;
   margin: 0 15px 0 120px;
}

jQuery

$('#arrow-button').mouseenter( function(){
  $('#arrow-button')
     .css(
      'background', 
      '#fc8236');
  $('#arrow-button:before')
    .css(
       'border-left', 
      '10px solid #fc8236');
});

$('#arrow-button').mouseleave( function(){
  $('#arrow-button')
    .css(
      'background', 
      'blue');
});

Answer 1

疑似要素#arrow-buttonの境界線の色を更新するクラスをアタッチできます。:before

CSS

#arrow-button.orange {
  background-color: #fc8236;
}

#arrow-button.orange:before {
  border-left: 10px solid #fc8236;
}

jQuery

$('#arrow-button').mouseenter( function(){
  $('#arrow-button').addClass('orange');
});

$('#arrow-button').mouseleave( function(){
  $('#arrow-button').removeClass('orange');
});