如何处理重叠非正方形DIV的悬停问题？

Question

我想创建自定义按钮 但是，由于重叠的伪元素，悬停功能无法正常工作 我该如何解决？感谢。

核心css如下所示：

  #left-btn{
    background: #007bff;
  }

  #left-btn::after{
    content: "";
    margin-left: 8vw;
    display: block;
    border-style: solid;
    border-width: 30px 0 0 45px;
    border-color: transparent transparent transparent #007bff;        
  }

  #right-btn{
    background: #BF2C36;
    margin-left: 45px;
  }
  #right-btn::before{
    content: "";
    display: block;
    margin-left: -45px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 45px 30px 0;
    border-color: transparent #BF2C36 transparent transparent;   
  }

  #right-btn:hover{
    cursor: pointer;
    background: #710305;
  }
  #right-btn:hover::before {
    border-right-color: #710305;
    cursor: pointer;
  }

  #left-btn:hover{
    cursor: pointer;
    background: #0062CC;
  }      
  #left-btn:hover::after {
    border-right-color: #0062CC;
    cursor: pointer;
  }  

或jsfiddle

Answer 1

你可以像this

那样做

CSS

#left-btn::after{    
    right: -23px;
    background: #007bff;
  }
  #right-btn::before{
    left: -23px;
    background: #bf2c36;

  }
#left-btn::after,
#right-btn::before {
  -moz-transform: skew(56deg, 0deg);     
  -webkit-transform: skew(56deg, 0deg);     
  transform: skew(56deg, 0deg); 
  position: absolute;
  top:0;
  width: 50px;
  height: 30px;
  content: "";
  display: block;
}

Answer 2

试试这个CODEPEN DEMO 的 HTML

<div class="btn-set">
  <div id="left-btn"></div>
  <div id="right-btn"></div>
</div>

<强> CSS

.btn-set{
    display:inline-block;
  }
  #left-btn,#right-btn{
    height:30px;
    width:8vw;
    display: inline-block;
  }

  #left-btn{
    background: #007bff;
border-width: 30px 0 0 45px;
  }

  #left-btn::after{
    content: "";
    margin-left: 8vw;
    display: block;
    border-style: solid;
    border-width: 30px 0 0 45px;
    border-color: transparent transparent transparent #007bff;        
  }

  #right-btn{
    background: #BF2C36;
    margin-left: 45px;
  }
  #right-btn::before{
    content: "";
    display: inline-block;
    margin-left: -45px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 45px 30px 0;
    border-color: transparent #BF2C36 transparent transparent;   
  }

  #right-btn:hover{
    cursor: pointer;
    background: #710305;

  }
  #right-btn:hover::before {
    border-right-color: #710305;
    cursor: pointer;
  }

  #left-btn:hover{
    cursor: pointer;
    background: #0062CC;
  }      
  #left-btn:hover::after {
    border-left-color: #0062CC;
    cursor: pointer;
  }