jquery - 如何在翻转时更改选择器伪元素的背景颜色？

Question

我的 CodePen： http ://codepen.io/leongaban/pen/cfLEh

我从CSS 形状的示例中创建了这个“尖点符号”按钮。

基本上，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

根本不需要js：

#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;
}

#arrow-button:hover {
   background: orange;
}

#arrow-button:hover:before {

  content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 28.5px solid transparent;
   border-left: 10px solid orange;
   border-bottom: 28.5px solid transparent;
   margin: 0 15px 0 120px;

}

Answer 2

您可以附加一个类来更新伪元素#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');
});

Answer 3

您只能使用css来做到这一点：

#arrow-button:hover {
   width: 180px; 
   height: 57px; 
   background: #fc8236;
   position: relative;
   left: 200px;
   text-align: center;
   cursor: pointer;
}

#arrow-button:hover:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 28.5px solid transparent;
   border-left: 10px solid #fc8236;
   border-bottom: 28.5px solid transparent;
   margin: 0 15px 0 134px;
}