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

【问题标题】：How to change background color of my selector's Pseudo-element on rollover?如何在翻转时更改选择器伪元素的背景颜色？
【发布时间】：2013-06-07 18:09:17
【问题描述】：

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

我在CSS shapes 上创建了这个“尖头符号”按钮。

基本上，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');
});

【问题讨论】：

标签： jquery css shape pseudo-element

【解决方案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;

}

【讨论】：

天哪，谢谢！我不知道你可以像那样把它们锁起来:) .. 再过 7 分钟

【解决方案2】：

您只能使用 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;
}

【讨论】：

【解决方案3】：

您可以将一个类附加到 #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');
});

【讨论】：